继承/层叠/特殊性
有的样式,子元素(下面的span)能继承,有的不能.
| 能继承 | 不能继承 | |
|---|---|---|
| 颜色color | 边框border |
仔细看下方代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>继承 / 层叠 / 特殊性</title>
<style type="text/css">
<!--标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100-->
p {color:red!important;border:5px solid blue;}/*标签权值为1*/
p {color:gray;border:5px solid blue;}/*标签权值为1*/
span{color: blue;}/*标签权值为1*/
.first{color:green;}/*类选择符权值为10*/
p span1{color:green;} /*标签权值为1+1=2*/
p span1.first{color:purple;} /*权值为(标签)1+(标签)1+(类选择符)10=12*/
#footer .note p1{color:yellow;} /*权值为(ID选择符)100+(类选择符)10+(标签)1=111*/
</style>
</head>
<body>
<!-- 继承============================= -->
<p>
p标签开始:</br> p标签里的颜色会变红, 会有边框</br>
<span>
span开始: </br>span此处是p标签的子元素,颜色也变红,因为color样式可继承</br>
但不会有边框,因为border不可继承.</br> span结束</br>
p标签结束.
</span>
</p>
<!-- 权值================================ -->
<p class="first">
p权值为1, first为10,听first的,为green.
</p>
<!-- 权值相同怎么办, 看层叠================= -->
<!-- 层叠即就近原则,像上方两个p样式,取第二个,gray================= -->
<p>
p权值为1, first为10.
</p>
<!--所以: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。-->
<!-- 重要性,第一个p样式,加了!important,就是最厉害的了,================ -->
<!-- 甚至,浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式<!important================ -->
</body>
</html>
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
