找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2189|回复: 0

[分享] CSS中权重的例子

[复制链接]
发表于 2013-4-25 13:08:43 | 显示全部楼层 |阅读模式 来自 中国–广东–广州
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>



<!--例子-3-->

<!--内联样式的权重为1000,大于内部样式和外部样式的权重,因此当样式冲突时,只会显示内联样式-->

<html>
<head>
<style type="text/css">
<!--
p{color:red}
-->
</style>
</head>

<body>
<p style="color:green">It's green</p>
</body>

</html>



<!--例子-4-->
<!--!mportant-->
<html>
<head>
<style type="text/css">
<!--
body{font-size:20pt; color:blue;}
div{text-decoration:underline !important; font-size=:10pt; color:red !important;}
.vip{text-decoration:overline; font-size:30pt; color:green}
#other{color:black}
p{color:yellow}
-->
</style>
</head>

<body>
body中的文字
<div class="vip">
    class="vip",div中的文字
    <p>p中的文字,p位于div中</p>
</div>
<div id="other">
    id="other",另一个div中的文字
</div>
<br/>虽然类型选择器div的权重要比类选择器.vip和.other要小,但如果在div的样式之后加上!important,
则表示在div标签文本(不包括div标签中的标签,因为它们具有可继承性),该样式具有最高权重。
</body>

</html>

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-2 23:26 , Processed in 0.038023 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表