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: ...
随机推荐
- DL for objection detection
在计算机视觉领域,"目标检测"主要解决两个问题:图像上多个目标物在哪里(位置),是什么(类别).围绕这个问题,人们一般把其发展历程分为3个阶段:1. 传统的目标检测方法2. 以R- ...
- HadoopHA简述
1 概述 在hadoop2.0之前,namenode只有一个,存在单点问题(虽然hadoop1.0有 secondarynamenode,checkpointnode,buckcupnode这些,但是 ...
- APP 自动化测试封装结构模式
原文出处http://www.toutiao.com/a6268089772108333314/ 做过UI自动化测试同学,都会深深体会几个痛点:维护量大.适配量大.编写代码巨大等.基于这些问题,大家都 ...
- Django 分页器 缓存 信号 序列化
阅读目录 分页器 缓存 信号 序列化 Django分页器 (paginator) 导入 from django.core.paginator import Paginator, EmptyPage, ...
- 第一个Python程序(Day3)
一 Python 解释器执行Python程序的过程 eg:python3 C:\ test.py 1.启动python解释器 (内存中) 2.将C:\ test.py中的内容从硬盘读入内存 ...
- Java并发之CyclicBarria的使用
Java并发之CyclicBarria的使用 一.简介 笔者在写CountDownLatch这个类的时候,看到了博客园上的<浅析Java中CountDownLatch用法>这篇博文,为博主 ...
- HCNP学习笔记之TCP中FLAGS字段SYN, FIN, ACK, PSH, RST, URG
在TCP层,有个FLAGS字段,这个字段有以下几个标识:SYN, FIN, ACK, PSH, RST, URG. 其中,对于我们日常的分析有用的就是前面的五个字段. 含义: SYN 表示建立连接, ...
- 华为交换机S5700系列配置通过STelnet登录设备示例
配置通过STelnet登录设备示例 组网图形 图1 配置用户通过STelnet登录设备组网图 在服务器端生成本地密钥对 <HUAWEI> system-view [HUAWEI] sysn ...
- Spring_通过注解配置 Bean(2)
- 配置阿里云maven中央库
<mirrors> <mirror> <id>nexus-aliyun</id> <mirrorOf>*</mirrorOf> ...