css 优先级

最新推荐文章于 2025-05-18 10:11:20 发布

fechild

最新推荐文章于 2025-05-18 10:11:20 发布

阅读量845

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css优先级

本文链接：https://blog.youkuaiyun.com/cotexarm7/article/details/80598996

css 专栏收录该内容

17 篇文章

订阅专栏

本文通过一个具体的HTML示例详细解析了CSS样式的优先级规则，包括如何确定具体元素的样式、不同选择器的优先级以及重要性声明的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<style>
/*1, answer: blue. 把li和ul调换顺序也一样*/
ul {
    color: red;
}
li {
    color: blue;
}
/*1, answer: blue*/
ul li {
    color: red;
}
#must-buy {
    color: blue;
}
/*1, answer: blue*/
.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}
/*1, answer: blue*/
ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}
/*1, answer: blue*/
ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}
/* answer: blue*/
ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}
/* answer: red*/
#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}
</style>
</head>
<body>
<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy">
      <span class="highlight">Sausage</span>
    </li>
</ul>
<script type="text/javascript">
  /*
  1.根据dom，去找css，只有当css定位的是同一个元素时（css 设置一模一样），后面的css设置才会覆盖前面的css
  2.定位到具体元素的css优先级高于未定位到具体元素（继承而来的设置）。
  3.如果2种设置都没有定位到具体元素（均需要继承），那么，离目标元素越近的设置，优先级越高。如果都没有定位到具体元素，均需要继承，并且距离目标元素距离一样，那么，按照 权重加和来判断优先级。
  4.如果2种设置均成功定位到目标元素，那就按照各项设置的权值加和来判断优先级。
  */
</script>
</body>
</html>