CSS的12种选择器

---

一、选择器的权重计算：

!important > 内联样式 > id > class > 标签 > *(通配)

1. !important：无穷大，但是不推荐使用
2. 内联样式：1000
3. id：100
4. class|属性|伪类：10
5. 标签：1
6. *(通配)：0

权重计算方式: id数量，class数量，标签数量
第一条css样式它的id数量是0，class数量是3，标签数量是1，那么它的权重就是0,3,1第二条css样式它的id数量是2，class数量是1，标签数量是1，那么它的权重就是2,1,1第三条css样式它的id数量是0，class数量是3，标签数量是2，那么它的权重就是0,3,2首先先从id数量比起，谁多谁就胜出。如果id数量比不出来，那么就从class数量比起，然后再到标签数量
eg:下面例子中，第二条样式id数量最多，它的权重要比其它两条大，所以css会识别这条，设置绿色。

二、12种选择器：

1.5种基本选择器：

通配选择器 (Universal selector)
作用: 选中页面中的所有元素

元素选择器 (Type selector)也叫类型选择器、标签选择器
作用: 根据标签名来选中指定的元素
语法:elementname{}

ID选择器 (ID selector)
·作用: 根据元素的 id 属性值选中一个元素·语法:#idname{}

类选择器 (Class selector)
·作用: 根据元素的class属性值选中一组元素
·语法:.classname

class 是一个标签的属性，它和 id 类似，不同的是 class。可以重复使用
可以通过 class 属性来为元素分组。可以同时为一个元素指定多个 class 属性

属性选择器 (Attribute selector)
作用: 根据元素的属性值选中一组元素
语法:
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值]选择属性值以指定值结尾的元素
[属性名*=居性值]选择属性值中含有某值的元素

2.2种复合选择器：

交集选择器
作用: 选中同时复合多个条件的元素。
语法: 选择器1选择器2…选择器n {}
注意:交集选择器中如果有元素选择器,必须使用元素选择器开头

并集选择器 (选择器分组)
作用: 同时选择多个选择器对应的元素
语法：选择器1,选择器2,…选择器n { }

3.3种关系选择器：

子元素选择器 (Child combinator)
作用: 选中指定父元素的指定子元素
语法:父元素 >子元素 { }

后代元素选择器 (Descendant combinator)
作用: 选中指定元素内的指定后代元素
语法：祖先 后代 { }

兄弟元素选择器 (Sibling combinator)
作用: 选择下一个兄弟
语法:
A1 + A2{ }相邻的兄弟选择器: 找紧挨着的下一个兄弟元素
A1 ~ A3{ }通用兄弟选择器: 后面所有兄弟元素

3.伪类选择器：

伪类:不存在的类，特殊的类。用来描述一个元素的特殊状态如: 第一个子元素、被点击的元素、鼠标移入的元素…
伪类一般情况下都是使用 : 开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child()中间写数字表示对应的元素
n: 第n个，n的范围0到正无穷
2n或even: 选中偶数位的元素
2n+1或odd:选中奇数位的元素以上这些伪类都是根据所有的子元素进行排序的
:first-of-type 同类型中的第一个了元素
:last-of-type 同类型中的最后一个子元素
:nth-of-type() 选中同类型中的第n个子元素这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的:not() 否定伪类，将符合条件的元素从选择器中去除

伪元素，表示页面中一些特殊的并不真实的存在的元素(特殊的位置)伪元素使用 ::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
::before 和 ::after 必须结合 content 属性来使用

所有的伪类：

所有的伪元素：