css权重计算规则
    CSS 权重计算规则是关于优先级顺序的一种方法。当多个 CSS 规则应用于同一元素时，它决定应使用哪些规则。
    规则的优先级顺序如下：
    1. 继承的样式不会被包括在计算中。
2. 对于每个选择器，浏览器会查匹配元素的所有规则，并将它们合并成一个规则。然后计算每个规则的优先级顺序，最终决定哪个规则将应用于元素。
3. 在同一规则中考虑样式的优先级，其中更具体的选择器具有更高的优先级。例如，`.header .title` 的优先级高于 `.header`，因为它更具体。
4. 对于每个选择器，将根据以下规则确定优先级（权重）：
      - 1 类型选择器、伪元素选择器和属性选择器（例如 `p`、`:hover` 和 `[type="text"]`）具有 1 个权重点。
  - 2 类选择器和属性选择器（例如 `.example` 和 `[type="text"]`) 有 10 个权重点。
  - 3 ID 选择器（例如 `#example`）有 100 个权重点。
      注意，内联样式具有比其它样式声明更高的优先级。因此，如果一个元素具有内联样式，那么它将覆盖从选择器继承的任何样式。
    最终，如果多个规则具有相同的优先级，则将使用优先写入的规则。例如，如果您在样式表中首先声明了一个规则，后来又声明了一个与其完全相同的规则，则后者将覆盖前者。这也适用于内联样式——如果一个元素应用了多个内联样式，那么将使用最后一个内联样式。
css 属性选择器
    例如，考虑以下 HTML：
    ```
<div class="header" id="example">
  <h1 class="title">Hello World!</h1>
</div>
```
    并假设以下样式表：
    ```
/* 选择器-specificity: 0-0-1 */
.title {
  color: red;
}
    /* 选择器-specificity: 0-1-0 */
.header {
  background-color: blue;
}
    /* 选择器-specificity: 1-0-0 */
#example {
  border: 1px solid black;
}
    /* 具有相同 specificities 的规则中的最后一个将被应用 */
.title {
  color: blue;
}
```
    在这个例子中，`#example` 的特定优先级（权重）为 1-0-0，因为它是一个 ID 选择器。因此，它的边框将是黑的。`.header` 的特定权重为 0-1-0，因此其背景颜为蓝。`.title` 的特定权重为 0-0-1，因此它的颜为蓝（由于覆盖了先前的样式声明）。
    总之，了解 CSS 权重计算规则对于有效地编写并管理样式表非常重要。它可以帮助您确定哪些规则将应用于元素，并确保您的元素具有您期望的外观。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。