02_css选择器&声明的优先级

CSS

级联样式表 / 层叠样式表(Cascading Style Sheets)

样式表的组成

• 规则：
  • 选择器+声明块
    • 声明
      • CSS合法的属性名+属性值

浏览器渲染样式表的顺序：

从右往左

css选择器

• 基本选择器及其扩展
• 属性选择器
• 伪类与伪元素选择器

基本选择器及其扩展

• 通配符选择器 *
• 元素选择器 body（任何一个HTML元素）
• 类选择器 .
• ID选择器 #
• 后代选择器 空格
• 组合选择器 （#test.pink）
• 选择器的分组
  用逗号隔开各个选择器（，结合符）
• 基本选择器的扩展：
  • 子元素选择器 使用>来选择。它不同于后代选择器，子元素选择器只是用来选择直接后代
    • 相邻兄弟选择器 - 使用+来选择。只匹配紧跟着的同胞元素
      通用兄弟选择器
    • 使用~来选择。匹配后面的同胞元素（不需要紧跟）

属性选择器

• 存在和值属性选择器

1. [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
2. [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
3. [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）
   中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

• 子串值属性选择器

1. [attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素
2. [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
3. [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
4. [attr*=val] : 选择attr属性的值中包含字符串val的元素。

伪类与伪元素选择器

伪类

• 链接伪类：

  锚点伪类：

  link：表示作为超链接，并指向一个未访问的地址的所有锚

  visited：表示作为超链接，并指向一个已访问的地址的所有锚

  目标伪类：

  target: 代表一个特殊的元素，它的id是URI的片段标识符

• 动态伪类：

  hover：悬浮到目标元素上

  active：点击下去

• 表单相关伪类：

  :disabled
  :enabled
  :checked(自定义单选按钮)
  :focus

• 结构性伪类：

  ele:nth-child(index)

  ele:nth-of-type(index) 以元素为中心

  区别：

    1.nth-child找到第index个子元素  这个子元素必须满足ele的规则
      nth-of-type找到第index个ele子元素
    2.nth-of-type以元素为中心
  

  注意：

    index可以是变量n（只能是n  0到正无穷）
    odd：奇数
    even：偶数 
  

伪元素：

::after      
::before

声明的优先级

层叠由四个概念组成：

特殊性
重要性
来源
顺序

先按来源进行刷选

	权重：
	读者的重要声明
	创作人员的重要声明
	创作人员的正常声明
	读者的正常声明
	用户代理的声明

如果来源相同，按选择器的特殊性继续刷选

	内联声明的特殊性都是1,0,0,0
	对于选择器中给定的ID属性值，加 0,1,0,0
	对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
	对于选择器中的给定的各个元素和伪元素，加0,0,0,1
	通配符选择器的特殊性为0,0,0,0
	结合符对选择器特殊性没有一点贡献
	继承没有特殊性

选择器的特殊性如果相同，按顺序继续刷选

说明：

选择器的特殊性：

选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0
一个选择器的具体特殊性如下确定：
1.对于选择器中给定的ID属性值，加 0,1,0,0
2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性
特殊性 1,0,0,0 大于所有以0开头的特殊性
选择器的特殊性最终都会授予给其对应的声明
如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

注意：id选择器和属性选择器
div[id=“test”]（0,0,1,1） 和 #test（0,1,0,0）

重要性：

有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明
并允许在这些声明的结束分号之前插入 !important 来标志。
必须要准确的放置 !important ，否则声明无效。
!important 总是要放在声明的最后，即分号的前面。

标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决
非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决
如果一个重要声明与非重要声明冲突，胜出的总是重要声明

继承

继承没有特殊性，甚至连0特殊性都没有
0特殊性要比无特殊性来的强

来源

css样式的来源大致有三种
创作人员
读者
用户代理
权重：
读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明

层叠：

层叠：
1.找出所有相关的规则，这些规则都包含一个选择器
2.计算声明的优先级
先按来源排序
再按选择器的特殊性排序
最终按顺序