css权重计算规则

更新时间:2023-06-11 18:43:03 阅读: 评论:0

张字最佳取名蜡笔小新壁纸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 个权重点。时尚服装图片
      注意,内联样式具有比其它样式声明更高的优先级。因此,如果一个元素具有内联样式,那么它将覆盖从选择器继承的任何样式。
    最终,如果多个规则具有相同的优先级,则将使用优先写入的规则。例如,如果您在样式表中首先声明了一个规则,后来又声明了一个与其完全相同的规则,则后者将覆盖前者。这也适用于内联样式——如果一个元素应用了多个内联样式,那么将使用最后一个内联样式。
    例如,考虑以下 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;
eop是什么意思
}
```
    在这个例子中,`#example` 的特定优先级(权重)为 1-0-0,因为它是一个 ID 选择器。因此,它的边框将是黑色的。`.header` 的特定权重为 0-1-0,因此其背景颜色为蓝色。`.title` 的特定权重为 0-0-1,因此它的颜色为蓝色(由于覆盖了先前的样式声明)。
    总之,了解 CSS 权重计算规则对于有效地编写并管理样式表非常重要。它可以帮助您确定哪些规则将应用于元素,并确保您的元素具有您期望的外观。

本文发布于:2023-06-11 18:43:03,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1034081.html

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

标签:规则   样式   元素   选择器   具有   内联
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图