CSS 选择器详解

常用选择器：

元素选择器：

  语法：标签名{}

  例子：div{} 

id选择器：

  语法：#id属性值{}

类选择器：

  语法：.class属性值{}

通配选择器：

  语法：*

交集选择器：

  语法：选择器1选择器2选择器3选择器n{}（交集选择器中如果有元素选择器，必须使用元素选择器开头）

  作用：选中同时复合多个条件的元素

并集选择器（选择器分组）：

  语法：选择器1，选择器2，选择器3，选择器n{}

  作用：同时选择多个选择器对应的元素

关系选择器：

子元素选择器：

  语法：父元素 > 子元素{}

  作用：选中指定父元素的指定子元素

后代选择器：

  语法：祖先 后代{}

  作用：选中指定元素内的指定后代元素

选择下一个兄弟：

  语法：前一个 + 下一个{}

选择下边所有兄弟：

  语法：兄 ~ 弟

属性选择器：

[属性名] 选择含有指定属性的元素

[属性名=属性值]选择含有指定属性和属性值的元素

[属性名^=属性值]选择属性值以指定值开头的元素

[属性名$=属性值]选择属性值以指定值结尾的元素

[属性名*=]选择属性值中含有某值的元素的元素

伪类选择器

伪类（不存在的类，特殊的类）用来描述一个元素的特殊状态，如被点击的元素、鼠标移入的元素、第一个子元素

伪类一般情况下用:开头如下所示

：first-child第一个子元素     ：last-child最后一个子元素

伪元素选择器：

伪元素表示页面中一些特殊的并不真实存在的元素（特殊位置）

伪元素使用:: 开头如下所示

::first-letter表示第一个字母     ::first-line表示第一行   ::before元素的开始   ::after元素的最后

选择器的权重

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同样式，当样式发生冲突时应用哪个样式由选择器的权重（优先级）决定

选择器的权重

内联样式             1000

id选择器              0100

类和伪类选择器    0010

元素选择器           0001 

通配选择器           0000

继承的样子           没有优先级

比较优先级时，需要将所有的选择器元素的优先级进行相加计算，最后优先级越高，越优先显示（分组选择器是单独计算的），选择器的累加不会超过其最大的数量级，如类选择器再高也不会超过id选择器。如果优先级相同，则显示靠后的样式。

在某一样式后面添加！important会获得最高优先级，慎用！