简单选择器优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 简单选择器优先级顺序: !important>id选择器>类选择器>标签选择器>通配符选择器
如果在简单选择器里的某个样式上加了!important，那么此时它的优先级是最高的
/
*{
color:yellow;
}
p{
color:blue;
}
.txt{
color:red !important;
}
#info{
color:green;
}
</style>
</head>
<body>
<p class="txt" id="info">我是一个段落</p>
</body>
</html>
讯享网
复合选择器优先级
讯享网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/
* 当修饰元素的选择器是复合选择器时，先比较id选择器出现的次数，谁的id选择器的次数多，谁的优先级高；
* 在id选择器次数相同情况下，再比较类选择器的次数，谁的类选择器的次数多，谁的优先级高
*
*/
/* 1个标签选择器，2个id选择器 */
div #box-second-id #box-three-id {
color: blue;
}
/*1个标签选择符 1个id选择符 1个类选择符*/
div #box-second-id .box-three-class {
color: red;
}
</style>
</head>
<body>
<div class="box-first-class" id="box-first-id">
<div class="box-second-class" id="box-second-id">
<div class="box-three-class" id="box-three-id">
我是一个div标签
</div>
</div>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/60035.html