A-A+

css样式表中的样式覆盖顺序

2015年06月23日 htmlcss 暂无评论 阅读 55 次

有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下

Css代码 :

#navigator {

height: 100%;

width: 200;

position: absolute;

left: 0;

border: solid 2 #EEE;

}

.current_block {

border: solid 2 #AE0;

}

查找一些教材中(w3schools等),只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明。经过测试和继续搜索,得知优先级如下排列:

1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:

id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式

所以上例中,#navigator的样式优先级大于.current_block的优先级,及时.current_block是最新添加的,也不起作用。

2. 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高

注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后:

Css代码

.class1 {

color: black;

}

.class2 {

color: red;

}

而某个元素指定class时采用 class="class2 class1"这种方式指定,此时虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时 仍然是class2的优先级更高,color的属性为red,而非black。

3. 如果要让某个样式的优先级变高,可以使用!important来指定:

Css代码

.class1 {

color: black !important;

}

.class2 {

color: red;

}

此时class将使用black,而非red。

对于一开始遇到的问题,有两种解决方案:

1. 将border从#navigator中拿出来,放到一个class .block中,而.block放到.current_block之前:

Css代码

#navigator {

height: 100%;

width: 200;

position: absolute;

left: 0;

}

.block {

border: solid 2 #EEE;

}

.current_block {

border: solid 2 #AE0;

}

需要默认为#navigator元素指定class="block"

2. 使用!important:

Css代码

#navigator {

height: 100%;

width: 200;

position: absolute;

left: 0;

border: solid 2 #EEE;

}

.current_block {

border: solid 2 #AE0 !important;

}

此时无需作任何其他改动即可生效。可见第二种方案更简单一些。

大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义。其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式, 并且出现重名的样式属性时,浏览器必须从中选择一个属性值,这个过程就叫“层叠”。样式覆盖(这种叫法更大众化些)遵循一定的规则,之前我对这个规则一直 似懂非懂的,直到这几天看了”CSS: The Missing Manual”,才豁然开朗。下面是我的一些学习笔记。

首先需要明确的是,很多情况都会导致一个元素被运用上多种样式,样式覆盖的规则也需要根据不同的情况来定,具体规则如下。

规则一:由于继承而发生样式冲突时,最近祖先获胜。

CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>rule 1</title>
<style>
body {color:black;}
p {color:blue;}
</style>
</head>
<body>
    <p>welcome to <strong>gaodayue的网络日志</strong></p>
</body>
</html>

strong分别从body和p中继承了color属性,但是由于p在继承树上离strong更近,因此strong中的文字最终继承p的蓝色。

规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜。

在上面的例子中,假如还指定了strong元素的样式,如:

1
strong {color:red;}

那么根据规则二,strong中的文字最终显示为红色。

规则三:直接指定的样式发生冲突时,样式权值高者获胜。

样式的权值取决于样式的选择器,权值定义如下表。

CSS选择器

权值
标签选择器 1
类选择器 10
ID选择器 100
内联样式 1000
伪元素(:first-child等) 1
伪类(:link等) 10

可以看到,内联样式的权值>>ID选择器>>类选择器>>标签选择器,除此以外,后代选择器的权值为每项权值之和,比如”#nav .current a”的权值为100 + 10 + 1 = 111。

规则四:样式权值相同时,后者获胜。

考虑下面这种情况

1
<pclass="byline">Written by <aclass="email"href="mailto:jean@cosmofarmer. com">Jean Graine de Pomme</a></p>
.byline a {color:red;}
p .email {color:blue;}

“.byline a”与”p .email”都直接指定了上面的a元素,且权值都为11,根据规则四,最终显示蓝色。

由于样式表可以是外部的,也可以是内部的,规则四提醒我们要注意外部样式表引入的顺序(及<link>元素的顺序),以及外部样式表与内部样式表的出现位置。一般来说,内部样式表出现在所有外部样式表的引入之后,一般是在</head>之前

规则五:!important的样式属性不被覆盖。

!important可以看做是万不得已的时候,打破上述四个规则的”金手指”。如果你一定要采用某个样式属性,而不让它被覆盖的,可以在属性值后加 上!important,以规则四的例子为例,”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖,不能滥用!important。

原文链接:http://blog.csdn.net/lishimin1012/article/details/20200465

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录