在CSS中使得一个具体的元素获得一个样式定义属性集合,有以下几种方式:
1、直接在元素中通过style来定义标签样式(许多JS是通过这种方式来动态控制元素的样式)
比如有以下代码
<div tyle="background:black">
</div>
通过style方式来定义了div标签的样式,这种方式定义样式在css规范中有很高的优先权(1000)
2.通过ID选择器来获取样式定义,有以下代码:
<div id="bgc">
</div>
然后我们定义了ID选择器的:
#bgc{background:black}
ID选择器也是据有比较高的优先权,每个权重为100
3、类选择器,伪类选择器,属性选择器
类选择器的定义和使用:
.bgc{background:black}
<div class="bgc">
</div>
这三类选择器在css规范中拥有的优先权相对较低,每个权重为10
4、元素和伪元素选择器
比如以下代码
div{background:black}
<div></div>
这类选择器在css规范中的优先权非常低,每个权重为1
5、其它选择符(全局选择符*,子选择符)
优先权最低,每个权重为0
6、继承
比如有这么一段html代码,
<div class="no1">
<p></p>
</div>
这里我设定.no1{ text-align:center},那么它下面的<p>标签也就继承了文字居中这个属性了。
这里的p标签获取到的样式的方式称之为继承,继承并不参与到优先权的计算当中,只要有其它方式的定义都会覆盖继承而来的属性。
在具体混合方式的css样式定义中,同一个属性的具体取值的确定,便是根据每种样式定义的方式的加权和来确定的。
优先值只是确定属性值的一个因素,还需要遵循的原则包括:
1、!important 声明的规则高于一切,如果 !important 声明冲突,则比较优先权。
2、如果优先权一样,则按源码中“后来者居上”的原则。
3、由继承而得到的样式属性不参与 specificity 的计算,低于一切其他规则(例 全局选择符 * )。
具体的例子如下(在IE7和FF中测试):
有这么一段html代码,我们不断修改style定义,观察颜色变化(为了说明跟源码顺序的关系,一次向上添加样式定义)
<html>
<style>
h1{color: red}
</style>
<body class="bodyColor">
<h1 id="idColor" class="myColor">
shaosheng test
</h1>
</body>
</html>
1、只有一行样式定义 h1 {color: red;}
只有一个普通元素加成,优先值为 0,0,0,1 显示红色
2、原有的h1定义之上添加一样定义 body h1{color:green}
有两个普通元素的加成,优先值为 0,0,0,2 显示绿色
3、新添样式定义 .myColor{color:black}
只有一个class选择符,优先值为 0,0,1,0 显示黑色
4、新添样式定义 body .myColor{color:pink}
有一个普通元素和一个class选择符加成,优先值为 0,0,1,1 显示粉色
5、新添样式定义 .bodyColor .myColor{color:blue}
由两个class选择符加成,优先值为 0,0,2,0 显示蓝色
6、新添样式定义 #idColor{color:silver;}
只有一个ID选择符,优先值为 0,1,0,0 显示银色
7、直接在h1标签上加上style定义style="color:purple"
这时,style定义的样式,优先值为 1,0,0,0 显示紫色
8、到这个时候完整的源代码为:
<html>
<style>
#idColor{color:silver;}
.bodyColor .myColor{color:blue}
body .myColor{color:pink}
.myColor{color:black}
body h1{color:green;}
h1{color: red;}
</style>
<body class="bodyColor">
<h1 id="idColor" class="myColor" style="color:purple">
shaosheng test
</h1>
</body>
</html>
在任何一个样式定义中加入!important就会显示该样式定义的颜色,当我们在多个定义上加入了!important,
这个几个样式值就会按照以上的优先值计算原则进行比较进行取舍
9、最后,我们把源码改成以下形式
<html>
<style>
.ortherColor{color:pink;}
.myColor{color:black;}
</style>
<body class="bodyColor">
<h1 id="idColor" class="myColor ortherColor">
shaosheng test
</h1>
</body>
</html>
在这里我们定义了两个级别相同的class选择器,并且在同一个标签中引用,进过测试不管
class="myColor ortherColor" 中两个选择符的先后顺序如何,文本显示的始终是黑色,只跟源码顺序有关系。
10、源码顺序问题
CSS源码,有两种方式一种是html中的style标签,一种是css文件,style标签中的顺序优先于文件中的优先级,文件中的优先级,
按照文件引入顺序而定。
最后,就一个非专业人员的感觉来说,这里的优先级跟JAVA中变量的优先级是相通的,大致原则是作用范围越小的优先级越高。
CSS样式优先级
最新推荐文章于 2024-07-05 19:25:28 发布