跳到主要内容

选择器可以用来指定网页上要格式化的 HTML 元素。

一、 CSS 选择器的优先级计算规则​

  • 基础选择器： ID(#)、类（.）、（元素）标签、通配符（*）、属性选择器（[attr=val]）
  • 复合选择器：后代，子代（>）、相邻兄弟（+）、通用兄弟（~）
  • 伪类与伪元素：
    • 伪类（状态/位置）：:hover、:active、:focus、:nth-child(n)、first-child 等
    • 伪元素（创建虚拟元素）：::before、::after、::first-letter 等
  • 优先级计算：!important（最高） > 内联样式（1000）> ID（100）> 类/伪类/属性（10）> 标签/伪元素（1）> 通配符（0）
  • 优先级冲突：相同优先级，“后声明覆盖先声明”

二、冲突规则​

CSS 代表层叠样式表（Cascading Style Sheets），层叠对于 SS 很重要。

  • 资源顺序：资源循序对层叠很重要，如果多条应用在同一个元素，那么后面的规则就会应用
  • 优先级：与层叠密切相关的是优先级，决定在发生冲突的时候应该使用哪条规则
  • 重要性：有一个特殊的 CSS 可以用来覆盖上面所有的优先级计算---!important

1. !import 的作用和潜在问题​

!important 会使得调试 CSS 变得困难，因为它更改了层叠的常规工作方式。

三、 继承机制​

一些设置在父元素的 CSS 属性可以被子元素继承，而另一些不能。

CSS 为控制继承提供了 5 个特殊的通用属性值，每个 CSS 属性都接收这些值：

  • inherit：设置该属性会使子元素和父元素相同（开启继承）
  • initial：将应用于选定元素的属性值设置为该属性的初始值
  • revert：将应用于选定的元素的属性值设定为浏览器的默认样式，而不是应用于该属性的默认值。在多数情况下，该值作用类似于 unset
  • revert-layer：将应用于选定元素的属性值重制为上一个层叠层中建立的值
  • unset：将属性设置为自然值，也就是如果属性是自然继承那么就是 inherit ，否则就是 initial 一样

1. 重制所有的属性值​

CSS 简写属性 all 可以同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个（inherit、initial、unset、revert）。这是一种撤销对样式所做的更改的简便方法，以便回到之前的已知的起点。

.all-unset {
  all: unset;
}