<!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>
css 优先级
最新推荐文章于 2025-05-10 15:15:05 发布