css3选择器总结

选择器类型

1.id选择器
#id属性值{}（id唯一）

2.类选择器
.class属性值{}
class可重复使用，可以同时为一个元素指定多个class属性

3.元素/标签选择器
元素名{} 例：p{}，div{}，h1{}

4.通配选择器
*{} 选中页面中的所有元素

5.复合选择器
①交集选择器：
选择器1选择器2选择器n{}
②并集选择器：
选择器1，选择器2，选择器n{}

6.层次选择器
①子元素选择器：
父元素>子元素
②后代元素选择器
祖先元素 后代元素
③兄弟元素选择器：
选择紧挨的下一个兄弟 前一个+后一个
选择后边所有的兄弟 前一个~后一个

7.属性选择器
①[属性名]：选择含有指定属性的元素
②[属性名=属性值]：选择含有指定属性和属性值的元素
③[属性名^=属性值]：选择属性值以指定开头的元素
④[属性名$=属性值]：选择属性值以指定结尾的元素
⑤[属性名*=属性值]：选择属性值中含有某值的元素的元素

8.伪类选择器
伪类（特殊的类，不存在的类）：用来描述一个元素的特殊状态，一般情况下以：开头

1. 根据所有的子元素进行排序

:first-child——第一个子元素
:last-child——最后一个子元素
:nth-child(n)——选中第n个元素，2n/eve（偶数位元素），2n+1/odd（奇数位元素）

2. 同类型元素中进行排序

:first-of-type
:last-of-type
:nth-of-type( )
例如：ul>li:first-of-type{} ——ul下面只有在li元素中排序的第一个

3. :not( )否定伪类

ul>li:not(:nth-child(2))——选中除了第二个元素以外的元素

4. 超链接的伪类（只适用于a）

:link 用来表示没访问过的链接
:visited 表示访问过的链接，只能修改链接颜色

5. 其他（所有元素都可）

:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击状态

9.伪元素选择器
伪元素表示特殊的位置，以::开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的元素
::before 元素的开始不存在的节点
::after 元素的最后不存在的节点
注意：before和after必须结合content属性来使用，before永远在最前，after永远在最后
例如：

运行结果：（鼠标选择时无法选中before和after的内容）

选择器优先级

优先级按下列顺序：

最高优先级 !important
内联样式——1000
id选择器——100
类和伪类选择器——10
元素选择器——1
通配选择器——0
继承的样式（没有优先级）

比较时需要将所有选择器的权重进行相加，权重越大优先级越高，如果优先级相同，则按照执行顺序优先使用靠下的样式