欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css 优先级

程序员文章站 2022-06-10 14:19:07
...
<!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优先级

上一篇： C#的winform中跨线程更新UI，非UI线程更新UI线程中的控件

下一篇： C# 跨线程访问及UI界面多线程更新方法

推荐阅读