一, 选择器的优先级
<!--常见标签选择器的优先级 :
选择器的针对性越强，它的优先级就越高
选择器的权值
通配选择符（*）：0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 1
id： 100
important： 1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
总结 : 范围越小,级别越高, 相同级别,执行后定义的. 根据项目中所述:
优先级 : 内联>id选择器>类选择器>标签选择器.
但是如果在标签后面加上important属性,那么它的优先级就是最高的.
-->
<html>
<head>
<meta charset="UTF-8">
<title>常见标签选择器的优先级</title>
<style>
/*标签选择器*/
div{
color: wheat;
background-color: yellow !important;
}
/*id选择器*/
#Alex{
color: yellow;
background-color: green;
}
/*类选择器*/
.William{
color: brown;
background-color: gold;
}
</style>
</head>
<body>
<div id="Alex" class="William" style="color: red" >哎呀,妈呀,为什么我感觉学编程的都那么帅</div>
</body>
</html>
- 总结
- 1, 选择器的优先级 : pimportant >内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素> 通配符 > 继承
- 2, 相同等级,那么就会选择后定义的选择器
- 3, 注意选择器的书写格式
网友评论