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

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:jean@cosmofarmer. com">Jean Graine de Pomme</a></p>

.byline a {color:red;}

p .email {color:blue;}

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

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

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

CSS样式:覆盖规则的更多相关文章

  1. CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  2. 【转】CSS样式覆盖规则

    大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义.其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值, ...

  3. CSS样式覆盖规则

    有一下问题, 想让下面的border生效 ,#比. 优先级高, #navigator { height: 100%; width: 200; position: absolute; left: 0; ...

  4. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  5. CSS样式覆盖顺序

    有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码   #navigator { height: 100%; width: 200; position:  ...

  6. div+css样式命名规则，值得收藏

    div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...

  7. CSS样式命名规则

    1.样式命名外 套: wrap主导航: mainnav子导航: subnav页 脚: footer整个页面: content页 眉: header页 脚: footer商 标: label标 题: t ...

  8. CSS中样式覆盖优先顺序

    原文地址:http://www.3lian.com/edu/2014/09-25/168393.html 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其 ...

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

    有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码   #navigator { height: 100%; width: 200; position:  ...

随机推荐

  1. easymake cmake xmake nmake ...

    最简单的Makefile,但是还是大程序少不了makefile工具 #CC=arm-linux-gnueabihf-CC=target:    $(CC)gcc -o algo_main algo_m ...

  2. 关于source insight、添加.s和.S文件，显示全部路径、加入项目后闪屏幕

    1.source insight使用也有一年多时间了,今天出现建工程后添加文件“no files found” 百思不得姐: 后面发现是原工程命名时出现非法字符.重新命名就ok了. 切记切记 2.实用 ...

  3. pandas（四）唯一值、值计数以及成员资格

    针对Series对象,从中抽取信息 unique可以得到Series对象的唯一值数组 >>> obj = Series(['c','a','d','a','a','b','b','c ...

  4. MySQL之 视图，触发器，事物，存储过程，函数（Day48）

    阅读目录 一.视图 二.触发器 三.事物 四.存储过程 五.函数 六.流程控制 一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...

  5. go——基本类型

    Go有许多预定义类型,这里简单把它们分为基本类型和高级类型.下面是基本类型列表: Go的基本类型共有18个,其中int和uint的实际宽度会根据计算架构的不同而不同.在386计算架构下,它的宽度为32 ...

  6. restful API（转自阮一峰）

    RESTful API 设计指南   网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制,方便不 ...

  7. vue-cli脚手架build目录中check-versions.js的配置

    转载自:https://www.cnblogs.com/ye-hcj/p/7074363.html 本文介绍vue-cli脚手架build目录中check-versions.js的配置 本文件是用来检 ...

  8. Kattis - pizzahawaii 【状态标记】

    Kattis - pizzahawaii [状态标记] Description You are travelling in a foreign country. Although you are al ...

  9. CSS小知识---table表格

    所用的仍是bootstrap的模板 <link rel="stylesheet" href="css/bootstrap.min.css"> < ...

  10. maven项目中如何创建web.xml

    在web工程创建时创建web.xml:用Eclipse新建一个web项目没有自动生成web.xml 在创建maven工程时,大多没有创建web.xml文件,web.xml路径:src/main/web ...