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要注意:

  1. 如果有两个标签设置成!important,那么这两个标签依旧进行优先级运算。

  2. 如果有两个标签的优先级一样,那么后面的覆盖前面的设置

<!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>

代码示例

属性继承

  对于一个子标签来说,其父级或往上的标签中某些样式是可以被继承的,比如:colorfont-*text-*line-*background-*等等,但是对于盒子模型中的一些属性如marginpadding以及定位,浮动等不能继承。

继承而来的属性优先级无限趋于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学习之选择器优先级与属性继承的更多相关文章

  1. CSS学习笔记——选择器

    选择器 当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的这些元素的规则就叫做选择器. 常用的选择器: 1.id选择器 #idname 2.类选择器 .classnam ...

  2. 第17天:CSS引入、选择器优先级(中级)

    一.CSS 位置 1.行内式  css <div class="fr" style="color:red;">aa</div> 2. 内 ...

  3. CSS学习笔记----选择器

    用过css的同志们都知道,选择器是非常重要的,如果选择器使用不当,即使你的css写的再好,但是不知道要用在哪个元素上,这不是英雄无用武之地吗? css,用过的都说好! 最基本的选择器,id选择器,类选 ...

  4. CSS学习之选择器

    html是盖房子,css是将房子装扮的更漂亮一些!CSS(Cascading Style Sheets),值层叠样式表. 语法 选择器 { 属性 : 属性值 ; } 比如, p{color:red;} ...

  5. CSS中选择器优先级与!important权重使用

    CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...

  6. CSS学习笔记3:选择器及优先级

    CSS选择器的类型: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器   1.标签选择器:     以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了 ...

  7. css知多少——选择器的优先级

    1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  8. 【CSS系列-选择器优先级总结】

    转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...

  9. CSS选择器优先级(转)

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

随机推荐

  1. profile(/etc/profile)和bash_profile的区别

    profile(/etc/profile)和bash_profile的区别 profile(/etc/profile),用于设置系统级的环境变量和启动程序,在这个文件下配置会对所有用户生效.当用户登录 ...

  2. Python Opencv-contrib Camshift&kalman卡尔曼滤波&CSRT算法 目标跟踪实现

    本次课题实现目标跟踪一共用到了三个算法,分别是Camshift.Kalman.CSRT,基于Python语言的Tkinter模块实现GUI与接口设计,项目一共包含三个文件: main.py: # co ...

  3. qt-embedded-4.5.3移植到FL2440开发板

    1. 2.configure配置 ./configure -opensource -confirm-license -release -shared -fast -no-qt3support -no- ...

  4. 关于thinkhphp3.1中废弃 preg_replace /e 修饰符

    警告:preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead 网上查了下 发现 php5.5版 ...

  5. QTabWidget 中 关于Tab 关闭和添加的基本教程!

    QTabWidget是PyQt5 中使用较为广泛的容器之一,经常会在日常使用的软件中用到它:QTabwidget是由几个标签组成,每个标签可以当作一个界面,下面就是应用Qtabwidget的一个简单例 ...

  6. python+selenium识别图片验证码

    import timeimport pytesseractfrom PIL import Image, ImageEnhancefrom selenium import webdriver url = ...

  7. fastjson对String、JSONObject、JSONArray相互转换

    String——>>>JSONArray String st = "[{name:Tim,age:25,sex:male},{name:Tom,age:28,sex:mal ...

  8. CKA考试个人心得分享

    考试相关准备: 真题:需要的私密: 网络:必须开启VPN,以便能访问国外网络,强烈建议在香港搭建相应FQ: 证件:考试需要出示含有拉丁文(英文)带照片的有效证件,相关有效证件参考(优先建议护照):ht ...

  9. 《Java并发编程的艺术》 第9章 Java中的线程池

    第9章 Java中的线程池 在开发过程中,合理地使用线程池能带来3个好处: 降低资源消耗.通过重复利用已创建的线程 降低线程创建和销毁造成的消耗. 提高响应速度.当任务到达时,任务可以不需要等到线程创 ...

  10. [ 头皮发麻 A1 ] 队内赛3 2020 Ateneo de Manila University DISCS PrO HS Division

    都是英语阅读题 但是本菜鸡就过了一题,直接自闭mmp明天开始起床一版题 传送门 B.Riana and the Blind Date 0是闰年?惊了 后来才知道整除被除数可以为0 闰年的计算方法 \( ...