<b>CSS中权重的例子</b>[网站美工]
本文“<b>CSS中权重的例子</b>[网站美工]”是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:
CSS2.1中利用一个4位的数字来表示权重,以下是有关权重的一些规定:
范例挑选符的权重为:0001
类挑选符的权重为:0010
通用挑选符的权重为:0000
子挑选符的权重为:0000
属性挑选符的权重为:0010
伪类挑选符的权重为:0010
伪元素挑选符的权重为:0010
包含挑选符的权重为:包含的挑选符权重值之和
内联款式的权重为:1000
担当的款式的权重为:0000
<!--例子1-->
<html>
<head>
<title>款式冲突</title>
<style type="text/css">
<!--
p{color:red} /*权重为:0001*/
p[align]{color:blue} /*权重为:0010*/
.vip{color:green} /*权重为:0010*/
#myid{color:purple} /*权重为:0100*/
-->
</style>
</head>
<body>
p{color:red} 权重为:0001<br/>
p[align]{color:blue} 权重为:0010<br/>
.vip{color:green} 权重为:0010<br/>
#myid{color:purple} 权重为:0100<br/>
<p>p{color:red}</p>
<p class="vip" id="myid">#myid{color:purple}</p>
<p align="left" class="vip" >.vip{color:green}</p>
类和属性二者权重相同,但为什么会利用类款式而不是属性款式,
</body>
</html>
<!--例子-2-->
<!--权重可以累加-->
<html>
<head>
<style type="text/css">
<!--
p{color:red}
body p{color:green}
-->
</style>
</head>
<body>
<p>body p{color:green}</p>
为什么会利用body p{color:green}款式,而不是p{color:red}款式呢?
因为body p{color:green}==body权重 + p权重 ==2 > p{color:red}==1
</body>
</html>
以上是“<b>CSS中权重的例子</b>[网站美工]”的内容,如果你对以上该文章内容感兴趣,你可以看看七道奇为您推荐以下文章:
本文地址: | 与您的QQ/BBS好友分享! |