用层叠管理多样式(Managing Multiple Styles: The Cascade)

最新推荐文章于 2019-11-30 11:09:50 发布

lost_sky

最新推荐文章于 2019-11-30 11:09:50 发布

阅读量371

点赞数

本文链接：https://blog.csdn.net/lost_sky/article/details/7219109

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

内容参考自《CSS实践手册》第二版

层叠是决定哪些样式属性要被应用到元素的一套规则。

继承样式的叠加

<html>
<head>
<title>Hello world!</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;}
p {color:#00F;}
strong {font-size:15px;}
</style>
</head>
<body>
	<p>
    	<strong>Hello world!</strong>
	</p>
</body>
</html>

标签嵌套在段落里面，这个段落又处在<body>里面，于是标签就会从它的两个祖先处得到继承，因此它从body处继承了font-family(字体)属性，又从父级段落处继承了color(颜色)属性，此外标签直接应用了font-size属性，所以标签的样式为

strong {
	font-family:Arial, Helvetica, sans-serif;
	color:#00F;
	font-size:15px;
}

最近的祖先样式先胜出

如果body标签和段落标签都设置了color属性，则标签会继承段落处的color属性

直接应用的样式胜出
如果body标签和段落标签和标签都设置了color属性，样式比body标签和段落标签更具体

用权重值决定哪种样式——最具体的样式中的属性会胜出
一个标签选择器值1分
一个类选择器值10分
一个ID选择器值100分
一个内建样式值1000分
（这个计算在大多数情况下适用）
伪元素(如 :first-line)通常被当作标签选择器
伪类(如: :link)通常被当作类对待
一个标签多个样式则对其值求和
个人觉得用位数来说明更清楚，权重值用ABC来表示(a代表ID，b代表类，c代表标签)，在相应的位数上加1

如
p(标签)，权重值为001
.footer(类)，权重值为010
#main(ID)，权重值为100
div .footer，div为标签，在C位上加1，.footer为类，在B位上加1 权重值为011
div#main，权重值为101
div#main div.footer,权重值为211

权重值相同时最后一个样式胜出
主要看样式表在HTML中的位置了

忽略权重值
在属性后使用!important(注意IE6无效)

lost_sky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用层叠管理多样式(Managing Multiple Styles: The Cascade)

内容参考自《CSS实践手册》第二版层叠是决定哪些样式属性要被应用到元素的一套规则。继承样式的叠加Hello world!body {font-family:Arial, Helvetica, sans-serif;}p {color:#00F;}strong {font-size:15px;} Hello world! 标签嵌套在段
复制链接

扫一扫