css选择器，权重
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
css选择器，权重css选择器
选择器的权重
在css中，那个选择器的权重⾼，就⾛谁的样式
标签选择器的权重是1
class选择器的权重是10
id选择器的权重是100
⾏间样式的权重是1000
带有关键字！important 的 css 属性权重⽆穷⼤
例⼦：p{
background: red!important;
}
权重的计算
将选择器上⾯的权重进⾏叠加后的总和就是该选择器的权重
例⼦： #auc .a p{
background-color：red；
} （总权重是：#auc .a p）
权重计算的规则
内联样式，如：style+“.....”权值为1000
id选择器，如：#content，权值为0100
类，伪类，属性选择器，如content，权值为0010
类型选择器，伪类选择器，如div p，权值为0001
继承的样式没有权值
权重相等的时候，后⾯的会覆盖前⾯的
例⼦：
<style type="text/css">
p .noa{
background-color: red;
}
.nva span{
background-color: aqua;
}
</style>
</head>
<body>
<p class="noa">
<span class="nva">
hello
</span>
</p>
</body>
css选择器的种类
标签权重是0001
类class 权重是0010 相等于255个标签选择器
id 权重是0100 相当于255个类
*通配符代表所有的标签权重是0000
后代选择器 a p 权重是累加0011
⼦代选择器 .a>p 权重是0011
交集选择器 .a#div
p.a{
background：red；
}
并集选择器 .a,.d
.b .a{
background: red;
}
css的⼏种形式
1.⾏间样式将 style 写在标签内的充当标签标签属性
例⼦：
<div class="nav" style="background: red;">adf</div>
2.⾏内样式
例⼦：<style>
.div{
background-color: red;
}
.a{
background-color：red；
}
</style>
3.外联样式
例⼦：
<link rel="stylesheet" type="text/css" href=""/>
css选择器的两⼤特性
1.继承性
继承性就是所有跟⽂本字体有关的属性都会被⼦元素继承。
且权重为0000
2.层叠性
层叠性就是解决选择器权重⼤⼩的⼀种能⼒，就是看那个选择器的权重⼤。
谁的权重⼤听谁的。
0010 相当于255个0001。