CSS三大特性
层叠性
相同的选择器设置相同的样式属性,其中一个样式会覆盖另外一个。
//同一div选择器,pink属性值离<body>最近,则red值被覆盖,font-size样式未冲突,则执行有效
<style>
div {
color: red;
font-size: 17px;
}
div {
color: pink;
}
</style>
<body>
<div></div>
</body>
层叠性原则
- 样式冲突,执行就近原则,哪个样式离
<body>
结构近,就选择哪一个。 - 同一样式会冲突覆盖,样式不冲突不会覆盖。
继承性
子标签会继承父标签的某些样式,如文本颜色字号行高等。
<style>
div {
color: red;
}
</style>
<body>
<div>
<p>文本</p>
</div>
</body>
对父标签div设置样式会影响到子标签p。
优先级性
当对同一结构设置的选择器不同时,则优先级也不同。
设置样式的优先级从小到大为:
继承或者通配符–>标签选择器–>类选择器或者伪类选择器–>id选择器–>行内样式属性style = “”–>在属性值后添加!important
标志
权重大小由前到后分别为:
0000–>0001–>0010–>0100–>1000–>无穷大
<style>
div {
color: green;
}
* {
color: pink;
}
p{
color: purple!important; //!important标志,优先级最高
}
.test {
color: red;
}
#demo {
color: blue;
}
</style>
<body>
<div>
//添加行内样式属性style
<p class = "test" id = "demo" sytle = "color: rgb(0,0,0)">文本</p>
</div>
</body>
优先级与选择器的前后顺序无关。只要是继承,不论父标签样式优先级最高,子标签的优先级永远最低。
链接a标签默认有标签选择器的默认样式,更改样式需要使用标签选择器及以上优先级的选择器样式更改。
复合选择器优先级
复合选择器会产生权重直接叠加。权重更大的复合选择器的优先级更高。
<style>
p {
color: green; //权重为0001
}
div p {
color: red; //权重为0001+0001 = 0002>0001,两者都属于标签选择,不存在继承
}
.div1 p {
color: blue; //权重为0010+0001 = 0011>0002
}
.div1 .pp {
color: purple; //权重为0010+0010 = 0020>0011
}
</style>
<body>
<div class = "div1">
<p class = "pp">文本</p>
</div>
</body>
复合选择器权重直接相加,并且无进位。