CSS 伪类和伪元素归纳

CSS 伪类和伪元素

1.伪类

CSS伪类用于向某些选择器添加特殊的效果

1.CSS3之前的伪类(状态伪类)

图中前5个为状态伪类

2.CSS3新增的伪类(结构伪类)

属性	说明
X:first-child	其父元素的首个子元素。IE7就可以支持
X:last-child	匹配父元素中最后一个X元素
X:nth-child(n)	用于匹配索引值为n的子元素。索引值从1开始
X:only-child	这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:nth-last-child(n)	从最后一个开始算索引。
X:first-of-type	匹配同级兄弟元素中的第一个X元素；
X:last-of-type	匹配同级兄弟元素中的最后一个X元素
X:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素X
X:only-of-type	匹配属于同类型中唯一兄弟元素的X
X:nth-last-of-type(n)	匹配同类型中的倒数第n个同级兄弟元素
X :root	匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty	匹配没有任何子元素（包括包含文本）的元素X

3.CSS3伪类的定义

(1)获取不存在于DOM树中的信息,比如<a>标签的::link,:visited等,这些信息不存在于DOM树中,只能通过CSS选择器来获取

(2) 获取不能被常规CSS选择器获取的信息,比如伪类:target

2.伪元素

CSS伪元素用于向某些选择器设置特殊效果

1.CSS3之前的伪元素

2.CSS3新增的伪元素

::selection匹配被用户选择或者处于高亮状态的部分,该元素只支持双冒号

::placeholder 匹配占位符的文本,只有元素设置placeholder属性,该伪元素才会生效

3.伪类和伪元素的区别

(1) 伪元素和伪类都是为了给一些特殊需求加样式,定义基本一致

(2)为了避免混淆伪类和伪元素的写法,CSS3中标准规定伪类使用单冒号:,伪元素使用双冒号::,但在此之前都是用的是单冒号,所以为了保证兼容伪元素,两种使用方法都可以,但是CSS3新增的只能用双冒号

(3)可以同时使用多个伪类,但只能使用一个伪元素

<!-- 使用伪类 可以同时使用多个如first-child和hover --!>
.box:first-child:hover{
    color:red
}

<!-- 使用伪元素 --!>
.box:first-letter{
    color:red
}

(4) 伪类与类优先级相同,伪元素与标签优先级相同

(5) 伪元素本质上是创建了一个有内容的虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容.

扩展优先级判断:

!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承

权值算法:

选择器	权值
!import	权重最大,优先级最高
内联样式表	权值1000
ID选择器权值	权值100
Class类/伪类	权值10
Html标签/伪元素	权值 1

当我们写样式时,如果遇到优先级的问题,可以按选择器中规则对应做加法,比较权值大小,权值大,优先级越高,如果权值相同,后面的覆盖前面的.