css选择器相关问题

一、链接伪类选择器

如图所示,下面四个链接伪类选择器表达的是每个链接伪类选择器的含义


链接伪类选择器

注意:1、4个书写顺序不能颠倒。

           2、可以省略其中几个伪类选择器,一般都只使用link和hover。

二、结构伪类选择器

1、:first-child:选取其父元素的子元素的首个孩子,效果如图


:first-child实例

2、:last-child :选取其父元素的子元素的最后一个孩子,效果如图


:last-child实例

3、:nth-child() :作用是选取某些孩子集合,顺序是从第一个往最后一个数,可以使一个具体位置的孩子,例如(li:nth-child(3)选择第三个孩子),也可以使一个表达式,例如(li:nth-child(2n)选取偶数的孩子集合),如图


:nth-child()内为单个值


:nth-child()内含表达式

4、:nth-last-child:和nth-child的功能相同,只是计数顺序不同,这个是从最后一个往前数。例子如图


:nth-last-child(2n)例子

三、目标伪类选择器

:target :当点击到目标位置时候,发生的一个样式改变,具体写法如下图


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 978评论 0 3
  • 转载自牢记31种CSS选择器用法 1 * 星号选择器用于选取页面中的所有元素,可用于快速清除所有元素的 margi...
    Icestains阅读 1,286评论 0 1
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,875评论 0 5
  • class 和 id 的使用场景? class属性: 指定标签的类名,CSS操作中,把一些特定的样式放到一个类中,...
    我要认真学前端阅读 1,038评论 0 0
  • 一.class 和 id 的使用场景? name:指定标签的名称应用场景:①form表单:name可作为传递给服务...
    Sunset125阅读 985评论 0 0