CSS学习之选择器优先级与属性继承
CSS学习之选择器优先级与属性继承
选择器优先级
其实选择器是具有优先级的,我们来看下面这一组案例:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div_1{ }
.div_1{ }
</style>
</head>
<body>
<div class="div-1" id="div_1">???</div>
</body>
</html>
代码示例
按理说,从上到下进行页面的渲染。最后<div>
的颜色应该是blueviolet
才对,为什么是firebrick
呢?
这就是优先级捣的鬼,他们的优先级如下:
CSS选择器优先级 | |
---|---|
行内式对元素进行渲染 | 1000 |
# 选择器 |
100 |
. 选择器 |
10 |
标签类型选择器(名字) | 1 |
可能上面的例子还不太生动,我再举一个例子:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div_3{ }
.div-1>.div-2>.div-3{ }
</style>
</head>
<body>
<div class="div-1">div1
<div class="div-2">div2
<div class="div-3" id="div_3">div3</div>
</div>
</div>
</body>
</html>
代码示例
这下能明白了为什么极度不推荐行内式了吧,一是因为维护麻烦,二是因为可扩展性太差。
!important强制更改优先级
我们可以使用!important
来强制更改优先级,让其优先级变得无限高。但是使用!important
要注意:
如果有两个标签设置成
!important
,那么这两个标签依旧进行优先级运算。如果有两个标签的优先级一样,那么后面的覆盖前面的设置


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div_3{
background-color: firebrick;
}
.div-1>.div-2>.div-3{
background-color: blueviolet !important;
}
</style>
</head>
<body>
<div class="div-1">div1
<div class="div-2">div2
<div class="div-3" id="div_3">div3</div>
</div>
</div>
</body>
</html>
代码示例
属性继承
对于一个子标签来说,其父级或往上的标签中某些样式是可以被继承的,比如:color
,font-*
,text-*
,line-*
,background-*
等等,但是对于盒子模型中的一些属性如margin
,padding
以及定位,浮动等不能继承。
继承而来的属性优先级无限趋于0,可直接被干掉。并且不能使用!important
来提升被继承属性的标签的优先级,简而言之,!important
只能提高自身的优先级。
‘


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div-1{ }
</style>
</head>
<body>
<div class="div-1">div1
<div class="div-2">div2
<div class="div-3" id="div_3">div3</div>
</div>
</div>
</body>
</html>
代码示例
可以看到,上图我们只给div-1
设置了`background-color:forsetgreen
,但是div-2
以及div-3
都继承了该属性。这就是继承性的体现。如果我们给div-3
随意设置一个属性,那么继承而来的属性就不存在了。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div-1{ }
.div-3{ }
</style>
</head>
<body>
<div class="div-1">div1
<div class="div-2">div2
<div class="div-3" id="div_3">div3</div>
</div>
</div>
</body>
</html>
代码示例
CSS学习之选择器优先级与属性继承的更多相关文章
- CSS学习笔记——选择器
选择器 当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的这些元素的规则就叫做选择器. 常用的选择器: 1.id选择器 #idname 2.类选择器 .classnam ...
- 第17天:CSS引入、选择器优先级(中级)
一.CSS 位置 1.行内式 css <div class="fr" style="color:red;">aa</div> 2. 内 ...
- CSS学习笔记----选择器
用过css的同志们都知道,选择器是非常重要的,如果选择器使用不当,即使你的css写的再好,但是不知道要用在哪个元素上,这不是英雄无用武之地吗? css,用过的都说好! 最基本的选择器,id选择器,类选 ...
- CSS学习之选择器
html是盖房子,css是将房子装扮的更漂亮一些!CSS(Cascading Style Sheets),值层叠样式表. 语法 选择器 { 属性 : 属性值 ; } 比如, p{color:red;} ...
- CSS中选择器优先级与!important权重使用
CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...
- CSS学习笔记3:选择器及优先级
CSS选择器的类型: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器 1.标签选择器: 以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了 ...
- css知多少——选择器的优先级
1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
- 【CSS系列-选择器优先级总结】
转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性 CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...
- CSS选择器优先级(转)
原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...
随机推荐
- profile(/etc/profile)和bash_profile的区别
profile(/etc/profile)和bash_profile的区别 profile(/etc/profile),用于设置系统级的环境变量和启动程序,在这个文件下配置会对所有用户生效.当用户登录 ...
- Python Opencv-contrib Camshift&kalman卡尔曼滤波&CSRT算法 目标跟踪实现
本次课题实现目标跟踪一共用到了三个算法,分别是Camshift.Kalman.CSRT,基于Python语言的Tkinter模块实现GUI与接口设计,项目一共包含三个文件: main.py: # co ...
- qt-embedded-4.5.3移植到FL2440开发板
1. 2.configure配置 ./configure -opensource -confirm-license -release -shared -fast -no-qt3support -no- ...
- 关于thinkhphp3.1中废弃 preg_replace /e 修饰符
警告:preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead 网上查了下 发现 php5.5版 ...
- QTabWidget 中 关于Tab 关闭和添加的基本教程!
QTabWidget是PyQt5 中使用较为广泛的容器之一,经常会在日常使用的软件中用到它:QTabwidget是由几个标签组成,每个标签可以当作一个界面,下面就是应用Qtabwidget的一个简单例 ...
- python+selenium识别图片验证码
import timeimport pytesseractfrom PIL import Image, ImageEnhancefrom selenium import webdriver url = ...
- fastjson对String、JSONObject、JSONArray相互转换
String——>>>JSONArray String st = "[{name:Tim,age:25,sex:male},{name:Tom,age:28,sex:mal ...
- CKA考试个人心得分享
考试相关准备: 真题:需要的私密: 网络:必须开启VPN,以便能访问国外网络,强烈建议在香港搭建相应FQ: 证件:考试需要出示含有拉丁文(英文)带照片的有效证件,相关有效证件参考(优先建议护照):ht ...
- 《Java并发编程的艺术》 第9章 Java中的线程池
第9章 Java中的线程池 在开发过程中,合理地使用线程池能带来3个好处: 降低资源消耗.通过重复利用已创建的线程 降低线程创建和销毁造成的消耗. 提高响应速度.当任务到达时,任务可以不需要等到线程创 ...
- [ 头皮发麻 A1 ] 队内赛3 2020 Ateneo de Manila University DISCS PrO HS Division
都是英语阅读题 但是本菜鸡就过了一题,直接自闭mmp明天开始起床一版题 传送门 B.Riana and the Blind Date 0是闰年?惊了 后来才知道整除被除数可以为0 闰年的计算方法 \( ...