CSS选择器-优先级比较
2016-07-13 本文已影响8人
我的梦想之路
不想说话，自己看图和代码注释，看了一天，很累的。
<html>
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style type="text/css">
/*
CSS选择器：
* 1. 在相同级别选择器：1.叠加原则 2.就近原则
* 2. id选择器>类选择器 > 标签选择器
* 3. 范围越小，优先级别越高
* 注意：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
* */
/*标签选择器：
* 遵循：就近原则/叠加原则
* */
div{
color: red;
}
div{
color: blue
}
div{
color: green;
}
/*类选择器*/
.text{
color: yellow;
}
/*id选择器*/
#tent{
color: deeppink;
font: "微软雅黑";
font-size: 30px;
}
/*复合选择器*/
div#tent{
color: gold;
font-size: 23px;
}
/*通配符：如果以上没有设置，则执行这个*/
*{
/*important:跳出规则，优先执行*/
color: darkcyan!important;
}
</style>
</head>
<body>
<div id="tent" class="text"> 路人不知我心疼</div>
</body>
</html>
选择器权值排表
界面效果图
