漫蛙漫画(网页入口) 层叠、优先级与继承
为层叠样式表（Cascading Style Sheets）所代表的 CSS，对于理解首个词层叠（cascade）而言是相当重要的，而层叠这种表现方式，乃是理解 CSS 的关键所在。
某些时候，做项目时，你会发觉一些理应产生效果的样式未生效 ，平常原因是你创建了两条作用于同一元素的规则 。与层叠紧密相关的概念是优先级 ，它决定冲突时该用哪条规则 。设计元素样式的规则或许并非期望的规则 ，因而要了解这些机制如何运作 。
在这儿同样有着继承的观念，即在预设的状况下，一部分css属性是会继承当下元素的父元素所设置下的值的，然而有些却是不会继承的。这同样有可能致使一些与预期不一样的结果出现。
我们迅速瞧一瞧正着手处理的关键问题，接着逐个知晓它们怎样彼此产生影响，以及跟CSS怎样进行交互。尽管这些概念不易领会，然而伴随持续的练习，你会渐渐熟知它的运行原理。
样式呈现层级叠加，简单来讲，这意味着CSS规则的先后顺序具备重要性，当针对一个元素应用两条位于同一级别的规则之际，书写在后面的那条规则便是实际会被采用应用的规则 。
在下面事例里，我们存在着两条针对 的准则，将最终展现为蓝色。这两条准则全都萌衍源自同一根源之处，且共同带有同样状况的元素挑选规则，具备相同的优先级别，正因为如此，排列顺序位于末尾之处的那个规则会切实产生效用。
这是我的标题。
h1 {
color: red;
}
h1 {
color: blue;
}
汶览器会依据优先级，去判定当存在多个规则，且这些规则有着不同选择器却对应同一元素时，该运用哪条规则。它大体上是一种用于衡量选择器究竟选取哪些区域的尺度，。
随后，我们进一步介绍两个适用于 的规则 。下面的 最终将呈现为红色 —— 类选择器 main-heading 具备更高的优先级 ，所以会被应用 —— 即便元素选择器顺序处于它之后 。
这是我的标题。
.main-heading {
color: red;
}
h1 {
color: blue;
}
稍后我们会详细解释优先级算法。
继承这件事，得放在一定的上下文范畴之内去进行理解，存在的情况是，有部分设置于父元素之上的 CSS 属性，是能够被其子元素继承得到的yy漫画画免费读漫画下拉式阅读网页，然而，另外还有些，却是不具备此继承特性的。
拿来一个示例，要是你设定一个元素的颜色以及字体家族，每一个处于其里面的元素同样都会拥有相同的属性，除非你径直在 해당 元素上进行属性设置。
由于主题颜色被设置为蓝色，因此该颜色会被子元素继承。
我们可以通过选择器定位元素来改变颜色，比如这个内容跨越元素。
body {
color: blue;
}
span {
color: black;
}
有一批属性并非能够被继承，比如说，要是给某一个元素把宽度设成百分之五十，那所有的后代都不会是父元素宽度的百分之五十，倘使这样的情况也能够继承，那么CSS将会极难使用！
备注，于MDN CSS属性参考页面，你会发觉一个名为“形式定义”的技术信息框，当中罗列了属性的诸多数据信息，涵盖能否被继承，以 为例 。
这三个概念共同来把控 CSS 规则得以应用于哪一个元素，在接下来的内容里，我们会目睹它们是怎样协同运作的，有时会让人觉得有点繁杂，然而当你对 CSS 拥有更多经验之际，你能够记住它们，就算忘掉了细节，能够在网上查找得到，有经验的开发人员同样不会记得全部细节。
下面的视频呈现了该如何运用Firefox的开发者工具去查验网页的级联状况以及优先级等等 ， 。
我们从继承开始。下面的例子中我们有一个
需要注意的是，通用选择器那就是*这种，组合符包含+、>、~、' '这些 ，以及调整优先级的选择器也就是:where() ，它们是不会对优先级产生影响的 。
否定，也就是:not()，以及任意匹配，即:is()，这两个伪类自身对于优先级是不存在影响的，然而它们的参数却会造成影响。在参数里面，那种对优先级算法有着贡献的参数，其优先级的最大值会被当作该伪类选择器的优先级。
这边有几个各自独立的例子，倘若空闲之时能够去瞧一瞧。尝试着做一番思索，领会知晓为何优先级要按照这样来确定。我们尚未对选择器展开深入的讲解，不过你能够于MDN的选择器参考页面寻觅到每个选择器的详尽信息。
选择器ID类元素优先级
h1
0-0-1
h1 + p::first-letter
0-0-3
li > a
href*="en-US"
> .inline-warning
0-2-2
#identifier
1-0-0
button:not(#mainBtn, .cta)
1-0-1
在我们继续之前，先看看这个示例。
/* 1. 优先级：1-0-1 */
#outer a {
background-color: red;
}
/* 2. 优先级：2-0-1 */
#outer #inner a {
background-color: blue;
}
/* 3. 优先级：1-0-4 */
#outer div ul li a {
color: yellow;
}
/* 4. 优先级：1-1-3 */
#outer div ul .nav a {
color: white;
}
/* 5. 优先级：0-2-4 */
div 标签内的 div 标签里，li 元素的第 2 个孩子，a 元素处于鼠标悬停状态时的样式设置。
border: 10px solid black;
}
/* 6. 优先级：0-2-3 */
div li:nth-child(2) a:hover {
border: 10px dashed black;
}
/* 7. 优先级：0-3-3 */
沿着div标签，循着里面的div，专门针对其中类名为nav的元素，在其位置序号为第二的情形下，针对其中的a标签，当。
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;
}
这里究竟出现了什么状况呢？首先呀，我们先来瞧瞧处于最上方的那个选择器规则，你就会发觉，我们已然将优先级计算好放置在最前面的那条注释当中了诶。
备注：每一个选择器类编，都有着它自身的优先级等级， 可它们不会被那些具有较低优先级的选择器所覆盖。 比如，权重为一百万的类选择器，不会去覆盖权重为一的 ID 选择器。
将不同的优先级等级各自单独打分，以此作为评估优先级的最佳办法，接着从最高级开始，在必要之时再Compute低优先级等级的权重。就是说，只有当某一列的优先级权重一致时，你才需要去评估下一列；不然的话，你能够直接忽视低等级的选择器，因为它们不能够覆盖高优先级等级的选择器。
内联样式，也就是在属性内出现的样式声明，它会优先于所有普通样式，不管普通样式的优先级是怎样的。这种声明不存在选择器，然而它们的优先级能够被理解为 1 - 0 - 0 - 0；意思是不管选择器中包含多少个 ID，它始终比其他任何优先级权重的样式都要高些，总之优先级更高。
有一个专门的 CSS ，它可用于覆盖全部上面所有优先级所进行的计算，只不过运用的时候得十分小心，那就是——!important ，它通过改变特定属性的值方式运用，从而实现覆盖普通规则的层叠效果。
备注：知晓!important是出于在查看他人代码之际明白其所能发挥的作用。然而，极力建议除非是在极为特殊的情形以外切莫使用它。!important改变的情况下其情形是层叠的 ordinarily工作方式，它会致使调试CSS问题变得异常艰难，尤其是在规模较大的样式表当中。
看看这个示例，有两个段落，其中一个有 ID。
这是个段落。
一个选择器掌管一切！
#winning {
background-color: red;
border: 1px solid black;
}
.better {
background-color: gray;
border: none !important;
}
p {
background-color: blue;
color: white;
padding: 5px;
}
让我们看看会发生什么——如果有什么疑问，试着删除一些属性：
你会发觉，第三个规则里，color的值被应用了，padding的值也被应用了，然而background - color没有被应用。原因是什么呢？理应三个都被应用才对呀，鉴于顺序规则是后面的会覆盖前面的。不管怎样，上面的规则胜出了汗汗画画免费阅读在线阅读下拉式，缘由是类选择器比元素选择器具有更高的优先级。两个元素都具备better，可是第二个是具备 的 。由于ID选择器较类选择器优先级要高些（一个页面当中仅能存在一个独特的ID，然而众多元素可有相同的类——ID针对于目标而言极具独特性），红色背景以及1px黑色边框理应都会被应用至第二个元素上，第一个元素应当是灰色背景且无边框，依据类选择器。第二个元素具备红色背景但却没有边框。这是为何呢？由于，!important声明处于第二条规则之中，此规则里，在border: none之后，这表明，即便计算得出的优先级较低，该属性依然采用这个值 。
备注：要覆盖那个带有“!important”的情况，唯一可行的办法是，存在另一个带有“!important”的情况，其具有相同、同等的优先级，且顺序处于靠后位置，或者是具有更高、超过已有的优先级 。
出现以下这种一个状况时，你或许就不得不去使用它了呀：当你没办法对核心的 CSS 模块进行编辑，不存在任何别的手段去覆盖它韩漫漫画网站免费观看下拉式，但是与此同时你又真切地有想要去实现覆盖这样一种样式的需求。然而讲真的哦，如果能够将其避开的话说就千万别去使用它呢。
最后，它很有用处，CSS 声明的优先级，由定义它的样式表所决定，还取决于级联层。
它赋予了用户一种能力，能够去设置自定义样式表，以此来覆盖掉开发人员所定义的样式。比如说，用户存在视力方面的受损情况，并且有着这样的想法，想要在所有网页之上，进行两倍于正常字体大小的设置，目的在于使其阅读起来能够更加容易 。
首先，在级联层里能够声明开发人员所定义的样式，接着要明确，你能够使非分层样式去覆盖分层样式，或者，你能够使得后面层中声明的样式去覆盖先前层中声明的样式。比如说，身为开发人员，你有可能不可以编辑第三方的样式表，然而，你能够把外部的样式表导入到级联层里头，以便你自身的样式能够轻易地覆盖导入的样式，并且无需去顾虑第三方选择器的优先级。
相互抵触的声明会依照以下次序予以应用，较后的那种声明会把较前的那种声明给覆盖掉：
用户代理样式表里头有着这般声明，举例来说，那是浏览器的默认样式，是在并未设置其他样式之际所使用的。用户样式表当中存在常规声明，系由用户所设置的自定义样式。作者样式表当中不乏常规声明，这些乃是我们 web 开发人员所设置的样式。说到作者样式表中还有着 !important 这份声明，用户样式表中有关 !important 的声明，以及用户代理样式表中的 !important 声明 。
备注：被标记为 !important 的样式，其优先级顺序是相反的。对于web开发人员而言，他们的样式表覆盖用户的样式表是具备意义的，如此一来设计便能依照预期去进行。然而，有时候用户有着充分的理由去覆盖web开发人员的样式，就像上面所提及的那样，这能够借助在他们的规则里运用 !important 得以达成。
虽说级联层归属于高级主题范畴，你大概不会马上运用此特性，然而知晓层究竟是怎样进行级联的，这是相当重要的 。
鲁ICP备18019461号-4
我要评论