第三章 结构和层叠
ps:这一章实在是太经典了，因为你无时无刻都在用着，当然你不知道里面的原理你也能用得顺顺当当，不过学习了之后还是很有趣的
主要讲的是当一个元素有两个或者多个冲突的属性声明，该怎么办？
1.特殊性
- 一般地，第一个0是为内联样式声明保留的，它比其他声明的特殊性都高
- 对于选择器中给定的各个ID属性，加0,1,0,0
- 对于选择器中给定的各个类属性值、属性选择或伪类，加0,0,1,0
- 对于选择器中给定的各个元素和为元素
- 还有一个为0特殊性的，就是通配符，需要注意，这点很有用
最高的特殊性为：
<p style="color:red;">skhdksh</p>p#red{colorLred;} //2
p.red{color:red;} //3
p[class="red"]{color:red;} //3
p:hover{color:red} //3
h1 p{color:red;} //4
p:first-child{color:red;} //42.重要性
用法：称为重要声明，在结束分号之前插入 !important来标志，放在其他位置都将无效
p.red{color:red !important;}
3.继承
一般只能向下继承，即沿着树向下传播到后代元素。但有一个例外是，应用到body元素的背景样式可以传递到html元素
body元素时浏览器默认显示的所有元素的祖先，而html元素则是整个文档的祖先（html为根元素）
一般地，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承，会使文档变得更混乱
试试下面的代码，可发现<em>Center</em>那里为灰色gray，为什么呢？
因为通配符适用于所有元素，有0特殊性，要优先于继承的黑色black,因为继承值根本没有特殊性
<html>
<head>
<style type="text/css">
*{color:gray;}
h1#page-title{color:black;}
</style>
</head>
<body>
<h1 id="page-title">Meerkat <em>Central</em></h1>
<p>
Welc<font>ome to book</font>fish
</p>
</body>
</html>4.层叠
冲突时应该怎么做呢？
- 找出所有相关的规则
- 按重要声明和非重要声明分组；按来源对所有声明排序。在下一节分详细说明来源排序
- 按特殊性排序
- 按出现顺序排序。声明在文档越后出现，权重越大。因此导入样式表的声明在前，权重较小
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明（非重要声明）
- 读者的正常声明
- 用户代理声明
6.说说链接的LVHA由来（LoVe-HA，比较好记）
当然，你也可以选择其他变种，看情况来选择，LoVe-HA只是比较普遍的一种，主要是以未访问和已访问来分
首先这些选择器的特殊性都是一样的：0,0,1,0，属于伪类，所以按在文档中出现的顺序来排序权重
正在“点击”的未访问链接可以和其中3个规则匹配---：:link、：hover、：active
如果按这样排序 ：active、：hover、:link、：visited，那么排在后面的：link、：active会胜出，将覆盖悬浮：hover、：active规则，当然这是在规则都在设置同一个属性出现冲突的情况下发生，在下面的规则才是会发生覆盖，顺序才有那么重要，那么不同的属性，如color,font-size,background-color等等不同属性顺序就没关系了
:link{color::red;}
:visited{color::red;}
:hover{color::red;}
:active{color::red;}
好了，就先这样吧，也不知有没有错，但总结之后发现理解了更多，前端之路继续咯
s
扫一扫
2418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
