css 优先级

最新推荐文章于 2024-07-22 18:56:14 发布

fechild

最新推荐文章于 2024-07-22 18:56:14 发布

阅读量801

点赞数

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

本文链接：https://blog.csdn.net/cotexarm7/article/details/80598996

版权

css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!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>

fechild

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 优先级

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;/*1, answer: blue. 把li和ul调换顺序也一样*/ul { color: red;}li { color: blue;}/*1, answer: blue*/ul li { color: red;}#must-buy ...
复制链接

扫一扫

专栏目录