CSS核心内容：层叠和继承

时间：2022-10-05 15:04:31

实际的工作中，当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？其实这是通过层叠机制来控制的，这也和样式继承（元素从其父元素那里获得属性值）有关。样式的优先级就是这样的一个机制，它包括!important，专用性和源代码次序（CSS定义的位置及先后顺序）。

1.1      重要性

在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：!important。把它加在属性值的后面可以使这条声明有无比强大的力量。

关于!important此处不详细介绍，它利弊同在，在工作中公共样式表万万不能用!important。

知道 !important存在是很有用的，这样当你在别人的代码中遇到它时，你就知道它是什么了。但是！我们建议你千万不要使用它，除非你绝对必须使用它。您可能不得不使用它的一种情况是，当您在CMS中工作时，您不能编辑核心的CSS模块，并且您确实想要重写一种不能以其他方式覆盖的样式。 但是，如果你能避免的话，不要使用它。由于 !important 改变了层叠正常工作的方式，因此调试CSS问题，尤其是在大型样式表中，会变得非常困难。

相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：

  • 在用户代理样式表的声明 (例如：浏览器在没有其他声明的默认样式).
  • 用户样式表中的普通声明（由用户设置的自定义样式）。
  • 作者样式表中的普通声明（这是我们设置的样式，Web开发人员）。
  • 作者样式表中的重要声明
  • 用户样式表中的重要声明

1.2      专用性

专用性基本上是衡量选择器的具体程度的一种方法（它能匹配多少元素）。

元素选择器具有很低的专用性；类选择器具有更高的专用性，所以将战胜元素选择器；ID选择器有甚至更高的专用性，所以将战胜类选择器；战胜ID选择器的唯一方法是使用 !important。

一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位（在四个列中的四个简单数字）：

千位

如果声明是在style属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。

百位

在整个选择器中每包含一个ID选择器就在该列中加1分。

十位

在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。

个位

在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

下表显示了几个示例。理解专用性的含义和计算过程。

选择器

千位

百位

十位

个位

合计值

h1

0

0

0

1

0001

#important

0

1

0

0

0100

h1 + p::first-letter

0

0

0

2

0003

li > a[href*="en-US"] > .inline-warning

0

0

2

2

0022

#important div > div > a:hover, 在一个元素的 <style> 属性里

1

1

1

3

1113

下面通过一个例子来展示专用性值。

HTML

<div id="outer" class="container">

<div id="inner" class="container">

<ul>

<li class="nav"><a href="#">One</a></li>

<li class="nav"><a href="#">Two</a></li>

</ul>

</div>

</div>

CSS

/* specificity: 0101 */

#outer a {

background-color: red;

}

/* specificity: 0201 */

#outer #inner a {

background-color: blue;

}

/* specificity: 0104 */

#outer div ul li a {

color: yellow;

}

/* specificity: 0113 */

#outer div ul .nav a {

color: white;

}

/* specificity: 0024 */

div div li:nth-child(2) a:hover {

border: 10px solid black;

}

/* specificity: 0023 */

div li:nth-child(2) a:hover {

border: 10px dashed black;

}

/* specificity: 0033 */

div div .nav:nth-child(2) a:hover {

border: 10px double black;

}

a {

display: inline-block;

line-height: 40px;

font-size: 20px;

text-decoration: none;

text-align: center;

width: 200px;

margin-bottom: 10px;

}

ul {

padding: 0;

}

li {

list-style-type: none;

}

1.3      源代码次序

如果多个相互竞争的选择器具有相同的重要性和专用性，后面的规则将战胜先前的规则。

比如页面中有HTML代码：<div class="a b c">nDos</div>，先后有样式.c { color:yellow; } .b { color:blue; } .a { color:red; }。那么nDos应该显示什么颜色？这里有一点混淆的地方，那就是元素中class出现的次序，这个次序毫无意义，nDos最终显示红色，按照样式出现的先后次序来竞争。假如更改样式出现的次序，比如：.c { color:yellow; } .a { color:red; } .b { color:blue; }，那么nDos将显示蓝色。

1.4      关于层叠

在考虑所有这些层叠理论和什么样式优先于其他样式被应用时，你应该记住的一件事是，所有这些都发生在属性级别上（属性覆盖其他属性），但你不会让整个规则凌驾于其他规则之上。

当多个CSS规则匹配相同的元素时，它们都被应用到该元素中。只有在这之后，任何相互冲突的属性才会被评估，以确定哪种风格会战胜其他类型。

1.5      继承

CSS中某些元素若在父元素设置了之后，子元素就算不设置，也会默认获得该属性。比如color和font-family属性，若父元素设置{ color:red }，则其子元素若不修改该属性，则文本将默认显示为红色。继承并不难理解，上面介绍了两个可以被继承的属性，那么padding属性能否继承呢？显然不能，原因不再赘述。

关于默认可以被继承的属性列表，以及不能继承的属性列表，请参见另外一篇博文CSS中能够以及不能够被继承的属性。

控制继承

CSS为处理继承提供了三种特殊的通用属性值：

inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。

initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。

unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。

注意: initial 和 unset 不被IE支持。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CSS继承</title>

<style>

body { color: green; }

.inherit a { color: inherit; }

.initial a { color: initial }

.unset a { color: unset; }

</style>

</head>

<body>

<ul>

<li>默认的 <a href="#">link</a> 颜色</li>

<li class="inherit">inherit的 <a href="#">link</a> 颜色</li>

<li class="initial">initial的 <a href="#">link</a> 颜色</li>

<li class="unset">unset的 <a href="#">link</a> 颜色</li>

</ul>

</body>

</html>

我们首先设置<body> 的color为绿色。

由于color属性是自然继承的，所有的body子元素都会有相同的绿色。需要注意的是默认情况下浏览器设置链接的颜色为蓝色，而不是自然继承color属性，因此在我们列表中的第一个链接是蓝色的。

第二个规则设置一个类 inherit 的元素内的链接，并从父类继承它的颜色。在这种情况下, 意思是说链接继承了父元素<li>的颜色，默认情况下<li>的颜色来自于它的父元素 <ul> , 最后<ul> 继承自 <body>元素，而<body>的color 根据第一条规则设置成了绿色。

第三个规则选择了在元素上使用类 initial 的任意链接然后设置他们的颜色为 initial 。通常， initial 的值被浏览器设置成了黑色，因此该链接被设置成了黑色。

最后一个规则选择了在元素上使用类 unset 的所有链接然后设置它们的颜色为 unset  ——即我们不设置值。因为color属性是一个自然继承的属性，它实际上就像把值设置成 inherit 一样。结果是，该链接被设置成了与body一样的颜色——绿色。

CSS核心内容：层叠和继承的更多相关文章

  1. CSS学习摘要-层叠和继承

    当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关. 元素的最终样式可以在多个地方定义,它们以复杂的形式相 ...

  2. CSS核心内容之盒子模型

    1.盒子模型具有的属性: 内容(content) 填充(padding) 边框(border) 边界(margin) 图示如下: 2.流概念 1.流的概念 在现实生活中已经流水,在网页设计中就是指元素 ...

  3. CSS核心内容之浮动

    1.浮动涉及到左浮动,右浮动,清除浮动． 2.浮点的特点: 1.向指定的方向浮动,并且让出空间 2.如果后面的元素也是浮动的,那么后面的元素就会在碰到前面的浮动的元素或者边框时,就定位在那里 3.如果 ...

  4. CSS的三大特性（继承、层叠和优先级）

    CSS的三大特性(继承.层叠和优先级) 1.css属性的继承 CSS中有些属性是可继承的,何为属性的继承? 一个元素如果没有设置某些属性的值,就会跟随(继承)父元素的属性值.当然,一个元素如果有设置自 ...

  5. CSS 层叠与继承

    三种继承css方式 1.段内继承 <p style="color: red;font-size:50px;">样式原文</p> 原文变成 红色, 原文字体变 ...

  6. CSS中的层叠、特殊性、继承、样式表中的&commat;import

    CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...

  7. CSS 三大特性 层叠 继承 优先级

    css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...

  8. CSS 设计彻底研究（一）&lpar;X&rpar;HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  9. ES6&sol;ES2015核心内容

    ECMAScript定义了: JS语言语法 – 语法解析规则.关键字.语句.声明.运算符等. 类型 – 布尔型.数字.字符串.对象等. 原型和继承 内建对象和函数的标准库 – JSON.Math.数组 ...

随机推荐

  1. 手动启动angular

    关于手动启动 angular 的问题 angular核心原理解析1:angular自启动过程 angular.element(document).ready(function() { angular. ...

  2. WCF Publisher&sol;Subscriber 订阅-发布模式

    本博后续将陆续整理这些年做的一些预研demo,及一些前沿技术的研究,与大家共研技术,共同进步. 关于发布订阅有很多种实现方式,下面主要介绍WCF中的发布订阅,主要参考书籍<Programming ...

  3. ORA-28002：the password will expire within 6 days

    1.查看用户的proifle SELECT username,PROFILE FROM dba_users; 2.查看指定概要文件(如default)的密码有效期设置:SELECT * FROM db ...

  4. EF&lpar;EntityFramework&rpar;与mysql使用&comma;序列化问题&lbrack;System&period;ObjectDisposedException&rsqb;

    在EF 中使用mysql关联取数据时,如果当前实体中包含另一个实体的list成员,而这个成员为空的话,在json序列化的时候就会报错: '((System.Data.Entity.DynamicPro ...

  5. 【vue】css解决&OpenCurlyDoubleQuote;防抖动”——防止页面加载图片抖动

    overflow:hidden;height:0;padding-bottom:*; // 其中*处填 图片的高宽百分比=高/宽*100%

  6. aio&comma;nio &comma;io 心得

    1.nio 流的过程有几个,连接,可读,读 ,返回 :连接了不一定可读,等待浪费时间,这些时间可以去读其他的连接,selector是管理,管理全部测一下可不可读,只对可读的连接进行读取.同时,nio有 ...

  7. 十大经典排序算法&plus;sort排序

    本文转自:十大经典排序算法,其中有动图+代码详解,本文简单介绍+个人理解. 排序算法 经典的算法问题,也是面试过程中经常被问到的问题.排序算法简单分类如下: 这些排序算法的时间复杂度等参数如下: 其中 ...

  8. Shell基础知识（六）

    shell中有很多内建命令,如何区分内建命令与外部文件,使用type command即可看到命令类型. >> type cd # input << cd is a Shell ...

  9. 使用SQL手动创建数据库并创建一个具有该数据库所有权限的用户

    $ mysql -u adminusername -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. ...

  10. JavaScript中的call和apply应用

    ECMAScript3给Function的原型定义了两个方法,他们是Function.prototype.call 和 Function.prototype.apply. 在实际开发中,特别是在一些函 ...

相关文章