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: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样式:覆盖规则的更多相关文章
- CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- 【转】CSS样式覆盖规则
大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义.其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值, ...
- CSS样式覆盖规则
有一下问题, 想让下面的border生效 ,#比. 优先级高, #navigator { height: 100%; width: 200; position: absolute; left: 0; ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- CSS样式覆盖顺序
有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: ...
- div+css样式命名规则，值得收藏
div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...
- CSS样式命名规则
1.样式命名外 套: wrap主导航: mainnav子导航: subnav页 脚: footer整个页面: content页 眉: header页 脚: footer商 标: label标 题: t ...
- CSS中样式覆盖优先顺序
原文地址:http://www.3lian.com/edu/2014/09-25/168393.html 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其 ...
- css样式表中的样式覆盖顺序(转)
有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: ...
随机推荐
- python连接mongo
连接mongodb数据库 用到pymongo模块 应该是这样来使用: , 'goods') 然后连接数据库层这么写 def getSpinfo(item,value,depart,comp): res ...
- js基本
BOM 浏览器对象模型 DOM 文档对象模型 js主要是来操作DOM和BOM,用的事件驱动方式,通过事件去执行相应函数 如何加载:在html当中有写链接,然后加载的时候会把js函数,数据全取出来,然后 ...
- Python中的WebSocket
一.Websockets介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信 ...
- Python3.x：pyodbc调用sybase的存储过程
Python3.x:pyodbc调用sybase的存储过程 示例代码 # python3 # author lizm # datetime 2018-03-02 17:00:00 # -*- codi ...
- java鲁棒性（健壮性）
java能检测编译和运行时的错误 java自己操作内存减少了内存出错的可能 java实现了真数组,避免了覆盖数据的可能 Java不支持指针操作,大大减少了错误发生的可能性 ... 备注: Java能运 ...
- COS-8文件系统
操作系统(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在“裸机”上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才能运行. 操作系 ...
- Linux中df命令查询磁盘信息和fdisk命令分区的用法
df - 报告文件系统磁盘空间的使用情况 总览 df [OPTION]... [FILE]... POSIX 选项: [-kP] GNU 选项 (最短方式): [-ahHiklmPv] [-t fs ...
- [Android]android Service后台防杀
网上有很多办法,方法一:在JNI里面fork出子进程service在单独的进程中,在service中调用JNI的代码,然后fork出一个进程,然后让我们的service进程和fork出来的子进程一直运 ...
- JAVA文件下载，页面显示另存为效果
经过测试 firefox.QQ.IE 浏览器是可以的 chrome浏览器不行(直接下载了) 1. 系统框架springmvc+jsp 2. 后台servlet代码 @RequestMapping( ...
- JMS-activMq与spring进行整合
对JMS做了一个简要介绍之后,接下来就讲一下Spring整合JMS的具体过程.JMS只是一个标准,真正在使用它的时候我们需要有它的具体实现,这里我们就使用Apache的activeMQ来作为它的实现 ...