CSS的特异性

CSS Specificity（CSS 特异性）是一个用来决定当多个CSS规则应用于同一个元素时，哪个规则将优先应用的机制。在CSS中，特异性是一个权重系统，它根据选择器的类型和数量计算权重。了解和正确应用CSS特异性对于有效地编写和管理CSS样式表至关重要。

特异性的计算规则

特异性的计算可以用一个“0-0-0-0”这样的四位数来表示，每一位代表不同类型的选择器：

  1. 内联样式（如 style="..."）: 每个内联样式计数为 1-0-0-0。
  2. ID选择器（如 #example）: 每个ID选择器计数为 0-1-0-0。
  3. 类选择器、伪类选择器和属性选择器（如 .example、:hover、[type="text"]）: 每个计数为 0-0-1-0。
  4. 元素选择器和伪元素选择器（如 div、::after）: 每个计数为 0-0-0-1。

计算示例

  • 对于选择器 #navbar .menu a:hover，其特异性为 0-1-1-2。这是因为有1个ID选择器（#navbar）、1个类选择器（.menu）和2个元素选择器（a和:hover）。
  • 选择器 div#navbar p.menu-item 的特异性是 0-1-1-1，包括1个ID选择器（#navbar）、1个类选择器（.menu-item）和1个元素选择器（div或p）。

特异性的应用

在应用样式时，浏览器会根据每个规则的特异性来决定优先级：

  • 较高特异性的规则优先：如果两个规则冲突，特异性较高的规则将被应用。
  • 特异性相同的情况下，最后定义的规则优先。
  • 特殊情况：!important 规则可以覆盖其他规则，但应谨慎使用，因为它可能导致样式表难以维护。

通过理解和利用CSS特异性，开发人员可以更有效地编写CSS规则，避免意外的样式冲突和覆盖问题。