CSS中的样式覆盖原则

规则一:由于继承而发生样式冲突时,最近祖先获胜(最近原则)。
CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况:


<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元素的样式,如:

strong {color:red;} 
那么根据规则二,strong中的文字最终显示为红色。

规则三:直接指定的样式发生冲突时,样式权值高者获胜。
样式的权值取决于样式的选择器,权值定义如下表。

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

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

规则四:样式权值相同时,后者获胜。
考虑下面这种情况

<p class="byline">Written by <a class="email" href="mailto:[email protected] 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://bbs.csdn.net/topics/390403416

CSS中的样式覆盖原则,布布扣,bubuko.com

时间: 2024-10-07 10:50:37

CSS中的样式覆盖原则的相关文章

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

css样式表中的样式覆盖顺序 - - ITeye技术网站http://spartan1.iteye.com/blog/1526735 重点归纳: 查找一些教材中(w3schools等),只说css的顺序是“元素上的style”>“文件头上的style元素”>“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明.经过测试和继续搜索,得知优先级如下排列: 或者以下也可以称之为一些优先原则(by liwei 20140803) 1.样式表的元素选择器选择越精确,则其中的样式

css样式表中的样式覆盖顺序(转)

转自:http://spartan1.iteye.com/blog/1526735 有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } 查找一些教材中(w3schools等),只说css的

随笔小记——css中的属性覆盖问题

今天写代码时遇到一个问题,贴图记录下: 问题关于li,最开始的时候,我css中写的是:.distination-Box .dist-list li{ width:55px; }这样来控制一级li的属性,但是最后一个li的属性却不能受之前li属性的影响,这里就产生了一个优先级的问题.最后发现当我把一级li的css这样写:.dist-list li{ width:55px;},最后一个li的css这样写:.distination-Box .distination-sec-Box{ width:100

关于CSS中background样式的repeat和no-repeat的坐标问题

背景图片我画了一个200px*200px的方格.记为test.jpg 其实是思考贴上的背景小图,与div边框之间的数据关系.从哪里开始贴的,横做坐标表示在哪个点. 例如  no-repeat -50px -50px.就说明是从框外(左右方向-50,上下-50)开始贴的. HTML中选用的是高250px,宽500px的边框2px的长方形 1.未带repeat和no-repeat也无横纵坐标 HTML:代码 background:url(test.jpg) "> 结果: 2.仅有repeat-

css中table样式

border-spacing:设置相邻单元格的边框间的距离; border-collapse:设置表格的边框是否被合并为一个单一的边框:{separate/collapse/inherit(IE不支持该属性)} text-align:水平对齐方式{left/center/right} vertical-align:设置垂直对齐方式{top/center/bottom} caption-side:设置表格标题的放置方式{top/bottom/inherit} empty-cells:隐藏表格中空单

css中格子样式的实现

期末成绩出来,CSAPP总算没有挂,能过个好年了! 好了,这次的需求是这样的: 如图,在父盒子中放入子盒子,子盒子的宽度为50%(33%.25%类似),使得呈现以上效果,看似简单,其实还是有一些繁琐的,具体的代码为 .box{ width: 400px; height: 400px; padding: 5px; background-color: #CCC; border-radius: 10px; } .block{ float: left; width: 50%; height: 50%;

css中字体样式通用设置

body{ font-family: "helvetica Neue", helvetica, arial, "microsoft yahei ui", "microsoft yahei", simhei, "\5BBB\4F53", simsun, sans-serif; }

CSS中的三种样式来源:创作人员、读者和用户代理

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式. 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件

《转载》CSS中的三种样式来源:创作人员、读者和用户代理

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. 首先,创作人员(author’s style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent’s style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一