css的继承、层叠和特殊性
2017-04-25 本文已影响0人
随意人生_1b90
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
}
运行效果：
color：red被应用
3-2，css样式表的优先级
内联样式表（标签内部）>嵌入样式表（当前文件）>外部样式表（外部文件）
4，重要性
为样式设置最高权重，使用！important
h1 {
color: green!important;
}
h1 {
color: red;
}
运行效果：
color: green!important; 被应用
在网页制作时不设计样式是的优先级：
用户自己设置的样式>网页制作者样式>浏览器默认的样式
但!important的权值高于用户自己设置的样式，优先应用
