1.css的继承
1-1,
p {
color: #2f2
}
以上p标签的设置不仅仅应用于p标签,还应用于p标签中的所有子元素的文本(这便是css的继承)
1-2,
不过不是所有css样式都可以继承,如:
p {
border: 1px solid #22F
}
p标签的此设置便不会被p标签中的子元素继承,它只设置p标签。
2,css的特殊性
2-1,css选择符的权值
2-1.1:id选择符的权值为100
2-1.2:类选择符的权值为10
2-1.3:标签的权值为1
2-1.4:继承也是有权限的,不过它的权限仅有0.1,是权限最小的
2-2,权值高的规定css的样式
2-3,权值的算法
2-3.1
#div1 p { color:yellow } /* 权值为 100+1=101 */
2-3.2
#div1 .class p { color:yellow } /* 权值为 100+10+1=111 */
2-3.3
p span { color:yellow } /* 权值为 1+1=2 */
2-3.4
.class span { color:yellow } /* 权值为 10+1=11 */
3,层叠
3-1,在html中一个元素拥有多个样式,且权值相等,那么那个样式在后面那个样式便被应用
h1 {
color: green
}
h1 {
color: red
}
运行效果:
3-2,css样式表的优先级
内联样式表(标签内部)>嵌入样式表(当前文件)>外部样式表(外部文件)
4,重要性
为样式设置最高权重,使用!important
h1 {
color: green!important;
}
h1 {
color: red;
}
运行效果:
在网页制作时不设计样式是的优先级:
用户自己设置的样式>网页制作者样式>浏览器默认的样式
但!important的权值高于用户自己设置的样式,优先应用