CSS选择器与优先级

CSS的选择器

• 原子选择器（我自己起的名，表示只有一个筛选条件）:
  • ID选择器：#<id属性的值>
  • 类选择器：.<class属性的值>
  • 标签选择器： <标签>
  • 伪类选择器（伪类表示元素的一个状态）：:focus、:active等
  • 伪元素选择器（伪元素表示元素的一个部分）：::before等
  • 属性选择器：[<属性的键>]、[<属性的键>=<属性的值>]、[attribute*=value]选择包含attribute值包含value的元素、[attribute^=value]以value开头、[attribute$=value]以value结尾
• 复合选择器（还是我自己起的名，表示把筛选条件用某种关系叠加起来）：
  • 后代选择器：一个空格，<祖先的选择条件> <后代的选择条件>
  • 直接后代选择器：>，div>p
  • 姐妹选择器：~，div~p
  • 相邻姐妹选择器：+，div+p
  • 群组选择器（多个选择条件选出来的元素应用同一个规则级）：<一些选择条件>,<另一些选择条件>

全部规则在附录中。

CSS规则的优先级

首先按照来源划分，用户代理!important > 用户!important > 开发者!important > CSS动画 > 用户样式（在开发者页面中手动修改） > 开发者样式（代码） > 用户代理样式（浏览器默认），都相同时，按照选择器的优先级划分。

选择器优先级大方向规则：越具体优先级越高。首先比较最具体级别的选择器，相同时再比较lower级别的选择器的优先级。优先级等同时，靠后的进行覆盖。

原子选择的优先级：内联样式 > ID选择器 > 类/伪类/属性选择器 > 标签选择器/伪元素选择器。

继承属性优先级最低。

这其中存在例外，但是一般不会需要知道得这么详细，需要时查阅MDN手册即可。通配选择器*、关系选择器、否定伪类选择器不影响优先级计算，而:not()括号中的选择器会参与优先级计算。

CSS属性继承

可以继承的属性分为几类：字体、文本（例如缩进、颜色等）属性的一部分、可见性visibility、表格布局属性的一部分、列表属性list-style、引用符号quotes属性、光标属性cursor。
字体属性就是font-size、font-family、font-style这些。
文本属性就是color、text-align、line-height等。
表格布局属性有caption-size、border-collapse、empty-cells、table-layout等。
这部分不用全部记住，查阅文档即可。

附录：选择器规则

伪类选择器：

:link 选择未被访问的链接
:visited 选取已被访问的链接
:active 选择活动链接
:hover 鼠标指针浮动在上面的元素
:focus 选择具有焦点的

:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:nth-last-of-type(n) 同类兄弟元素倒数第几个

:first-child 父元素的首个子元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:last-child 表示一组兄弟元素中的最后一个元素

:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素

伪元素选择器：

::first-letter 用于选取指定选择器的首字母
::first-line 选取指定选择器的首行
::before :选择器在被选元素的内容前面插入内容
::after :选择器在被选元素的内容后面插入内容

注意：after和before两个伪元素在CSS2就提出了，并且是一个冒号写法，因为CSS2还没有把伪元素和伪类进行区分。所以为了兼容IE8，很多人也用单个冒号的方式写这两个伪元素。

属性选择器的匹配规则：

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value] 选择attribute属性以value开头的元素
[attribute*=value] 选择attribute属性值包含value的所有元素
[attribute^=value] 选择attribute属性开头为value的所有元素
[attribute$=value] 选择attribute属性结尾为value的所有元素