css选择器的权重
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div #div02{ /* 1+100=101 */
color: #ff0;
width: 200px;
}
#div01>div{ /*100+1=101*/
height: 300px;
color: #f00;
width: 300px;
background-color: #00f;
}
.div01 .div02{ /*10+10=20 */
font-size: 50px;
}
#div01>#div02{ /*100+100=200*/
font-size: 20px;
background-color: #f00;
color: #fff;
}
div{
width: 500px!important;
height: 500px!important;
color: #f00!important;
background-color: #ff0!important;
}
</style>
</head>
<body>
<div class="div01" id="div01">
<div class="div02" id="div02" style="width: 10px;height: 10px; background-color: #000;">今天天气很好</div>
</div>
<!--
选择器是有权重的
内联样式 1000
id 100
class 10
元素 1
通用 0
boss !important 只要出现，就以这个为主
权重越高，冲突部分的样式就以权重高的为主，并不是说这个选择器没有用了，而是里面冲突的样式
权重仅仅只能作为参考
权重的计算
不需要管子代和后代的
如果权重相同，就近原则。以后定义的为准
无聊的事：
-->
</body>
</html>
扫一扫
5742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
