Cascade and inheritance

元素的最終樣式可以在許多不同的地方指定，它們可以以復(fù)雜的方式進(jìn)行交互。 這種復(fù)雜的交互使CSS變得強(qiáng)大，但它也可能使它混亂和難以調(diào)試。 本文旨在澄清一些復(fù)雜性; 如果你不立即理解它，不要擔(dān)心 - 這是CSS理論中最難理解的部分之一。 建議你現(xiàn)在嘗試，但然后把它附近作為一個(gè)方便的指南，回來(lái)時(shí)，關(guān)于級(jí)聯(lián)和繼承的問(wèn)題出來(lái)。

級(jí)聯(lián)

CSS是級(jí)聯(lián)樣式表的首字母縮寫(xiě)，表示級(jí)聯(lián)的概念很重要。 在其最基本的層面，它表明CSS規(guī)則的順序很重要，但它比這更復(fù)雜。 什么選擇器在級(jí)聯(lián)中勝出取決于三個(gè)因素(這些按重量順序列出 - 先前的將取代以后的選擇):

1. Importance
2. Specificity
3. Source order

重要性

在CSS中，有一個(gè)特殊的語(yǔ)法可以用來(lái)確保某個(gè)規(guī)則總是勝過(guò)所有其他規(guī)則:！important 。 將此添加到屬性值的結(jié)尾將給它超級(jí)大國(guó)。

讓我們看一個(gè)例子:

<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>

#winning {
  background-color: red;
  border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !important;
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

這將產(chǎn)生以下結(jié)果:

讓我們通過(guò)這看看發(fā)生了什么。

1. You'll see that the third rule's color and?padding values have been applied, but the background-color hasn't. Why? Really all three should surely apply, because rules later in the source order generally override earlier rules.
2. However, The rules above it win, because IDs/class selectors have higher specificity than element selectors (you'll learn more about this in the next section.)
3. Both elements have a class of better, but the 2nd one has an id of winning too. Since IDs have an even higher specificity than classes (you can only have one element with each unique ID on a page, but many elements with the same class — ID selectors are very specific in what they target), the red background color and the 1 pixel black border should both be applied to the 2nd element, with the first element getting the gray background color, and no border, as specified by the class.
4. The 2nd element does get the red background color, but no border. Why? Because of the !important declaration in the second rule — including this after border: none means that this declaration will win over the border value in the previous rule, even though the ID has higher specificity.

知道！important 存在是有用的，這樣當(dāng)你在其他人的代碼中遇到它時(shí)，你知道它是什么。 但。 我們建議你永遠(yuǎn)不要使用它，除非你絕對(duì)必須。 您可能必須使用它的一種情況是，當(dāng)您在CMS上工作時(shí)，您無(wú)法編輯核心CSS模塊，并且您確實(shí)要覆蓋不能以任何其他方式覆蓋的樣式。 但真的，不要使用它，如果你可以避免它。 因?yàn)?code>！important 改變了級(jí)聯(lián)的正常工作方式，它可以使調(diào)試CSS問(wèn)題真的很難解決，特別是在一個(gè)大的樣式表。

還要注意的是，CSS聲明的重要性取決于它指定的樣式表 - 用戶(hù)可以設(shè)置自定義樣式表以覆蓋開(kāi)發(fā)人員的樣式，例如用戶(hù)可能視覺(jué)受損，并且想要設(shè)置 在他們?cè)L問(wèn)的所有網(wǎng)頁(yè)上的字體大小是正常大小的兩倍，以便更容易閱讀。

沖突聲明將按以下順序應(yīng)用，稍后的聲明將覆蓋早期的聲明:

1. Declarations in user agent style sheets (e.g. the browser's default styles, used when no other styling is set).
2. Normal declarations in user style sheets (custom styles set by a user).
3. Normal declarations in author style sheets (these are the styles set by us, the web developers).
4. Important declarations in author style sheets
5. Important declarations in user style sheets

Web開(kāi)發(fā)人員的樣式表重寫(xiě)用戶(hù)樣式表是有意義的，所以設(shè)計(jì)可以保持原樣，但有時(shí)用戶(hù)有很好的理由重寫(xiě)Web開(kāi)發(fā)人員樣式，如上所述 - 這可以通過(guò)使用！重要 / code>。

特異性

特異性基本上衡量選擇器的具體細(xì)節(jié) - 它可以匹配多少個(gè)元素。 如上面所示的示例所示，元素選擇器具有低特異性。 類(lèi)選擇器具有更高的特異性，因此將勝過(guò)元素選擇器。 ID選擇器具有更高的特異性，因此將勝過(guò)類(lèi)選擇器。 獲得ID選擇器的唯一方法是使用！important 。

選擇器具有的特異性的量是使用四個(gè)不同的值(或分量)來(lái)測(cè)量的，其可以被認(rèn)為是四列中的數(shù)千，數(shù)百，數(shù)十和一 - 四個(gè)單個(gè)數(shù)字:

1. Thousands: Score one in this column if the matching selector is inside a <style> element or the declaration is inside a style attribute (such declarations don't have selectors, so their specificity is always simply 1000.) Otherwise 0.
2. Hundreds: Score one in this column for each ID selector contained inside the overall selector.
3. Tens: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.
4. Ones: Score one in this column for each element selector or pseudo-element contained inside the overall selector.

下表顯示了一些孤立的例子，讓你在心情。 嘗試通過(guò)這些，并確保你明白為什么他們有我們給他們的特殊性。

在我們繼續(xù)之前，讓我們看看一個(gè)行動(dòng)的例子。 這里是我們將使用的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;
}

我們從這段代碼得到的結(jié)果如下:

那么這里發(fā)生了什么？ 首先，我們只對(duì)這個(gè)例子的前七個(gè)規(guī)則感興趣，并且你會(huì)注意到，我們?cè)诿總€(gè)規(guī)則之前將它們的特異性值包括在注釋中。

• The first two selectors are competing over the styling of the link's background color — the second one wins and makes the background color blue because it has an extra ID selector in the chain: its specificity is 201 versus 101.
• The third and fourth selectors are competing over the styling of the link's text color — the second one wins and makes the text white because although it has one less element selector, the missing selector is swapped out for a class selector, which is worth ten rather than one. So the winning specificity is 113 versus 104.
• Selectors 5–7 are competing over the styling of the link's border when hovered. Selector six clearly loses to five with a specificity of 23?versus 24?— it has one fewer element selectors in the chain. Selector seven, however, beats both five and six — it has the same number of sub-selectors in the chain as five, but an element has been swapped out for a class selector. So the winning specificity is 33?versus 23?and 24.

源順序

如上所述，如果多個(gè)競(jìng)爭(zhēng)選擇器具有相同的重要性和特異性，則用于幫助決定哪個(gè)規(guī)則勝利是源順序的第三因素 - 稍后的規(guī)則將勝過(guò)早先的規(guī)則。 例如:

p {
  color: blue;
}

/* This rule will win over the first one */
p {
  color: red;
}

而在此示例中，第一個(gè)規(guī)則獲勝，因?yàn)樵错樞虮惶厥庑运〈?

/* This rule will win */
.footnote {
  color: blue;
}

p {
  color: red;
}

關(guān)于規(guī)則混合的注釋

當(dāng)考慮所有這些級(jí)聯(lián)理論，以及什么樣式應(yīng)用于其他樣式時(shí)，你應(yīng)該牢記的是，所有這些發(fā)生在屬性級(jí)別 - 屬性重寫(xiě)其他屬性，但是你不會(huì)得到覆蓋其他規(guī)則的整個(gè)規(guī)則。 當(dāng)幾個(gè)CSS規(guī)則匹配相同的元素時(shí)，它們都應(yīng)用于該元素。 只有之后，任何沖突的屬性評(píng)估，看看哪些單獨(dú)的風(fēng)格將勝過(guò)其他。

讓我們看一個(gè)例子。 首先，一些HTML:

<p>I'm <strong>important</strong></p>

現(xiàn)在一些CSS風(fēng)格它:

/* specificity: 0002 */
p strong {
  background-color: khaki;
  color: green;
}

/* specificity: 0001 */
strong {
  text-decoration: underline;
  color: red;
}

結(jié)果:

結(jié)果:

遺產(chǎn)

CSS繼承是我們需要調(diào)查以獲得所有信息和理解應(yīng)用于元素的樣式的最后一個(gè)部分。 想法是應(yīng)用到元素的一些屬性值將被該元素的孩子繼承，而一些不會(huì)。

• For example, it makes sense for font-family and color to be inherited, as that makes it easy for you to set a site-wide base font by applying a font-family to the <html> element; you can then override the fonts on individual elements where needed. It would be really annoying to have to set the base font separately on every element.
• As another example, it makes sense for margin, padding, border, and background-image to NOT be inherited. Imagine the styling/layout mess that would occur if you set these properties on a container element and had them inherited by every single child element, and then had to unset them all on each individual element!

默認(rèn)情況下，哪些屬性是繼承的，哪些屬性不是很常見(jiàn)。 但是，如果您確定要查看，可以查看 CSS參考 - 每個(gè)單獨(dú)的屬性 頁(yè)面將使用包含有關(guān)該元素的各種詳細(xì)信息(包括是否是繼承的)的摘要表開(kāi)始。

控制繼承

CSS提供了三個(gè)特殊的值來(lái)處理繼承:

• inherit : This value sets the property value applied to a selected element to be the same as that of its parent element.
• initial : This value sets the property value applied to a selected element to be the same as the value set for that element in the browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the property value is set to inherit instead.
• unset : This value resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like?initial.

inherit 值是最有趣的 - 它允許我們明確使一個(gè)元素從其父類(lèi)繼承一個(gè)屬性值。

讓我們來(lái)看一個(gè)例子。 首先一些HTML:

<ul>
? <li>Default <a href="#">link</a> color</li>
  <li class="inherit">Inherit the <a href="#">link</a> color</li>
? <li class="initial">Reset the <a href="#">link</a> color</li>
? <li class="unset">Unset the <a href="#">link</a> color</li>
</ul>

現(xiàn)在一些CSS樣式:

body {
  color: green;
}

.inherit a {
  color: inherit;
}

.initial a {
  color: initial
}

.unset a {
  color: unset;
}

結(jié)果:

讓我們解釋一下這里發(fā)生了什么:

• We first set the color of the <body> to green.
• As the color property is naturally inherited, all child elements of body will have the same green color. It's worth noting that browsers set the color of links to blue by default instead of allowing the natural inheritance of the color property, so the first link in our list is blue.
• The second rule sets links within an element with the class inherit to inherit its color from its parent. In this case, it means that the link inherits its color from its <li> parent, which, by default inherits its color from its own <ul> parent, which ultimately inherits its color from the <body> element, which had its color set to green by the first rule.
• The third rule selects any links within an element with the class initial and sets their color to initial. Usually, the initial value set by browsers for the text color is black, so this link is set to black.
• The last rule selects all links within an element with the class unset and sets their color to unset — we unset the value. Because the color property is a naturally inherited property it acts exactly like setting the value to inherit. As a consequence, this link is set to the same color as the body — green.

主動(dòng)學(xué)習(xí):使用級(jí)聯(lián)

在這個(gè)主動(dòng)學(xué)習(xí)中，我們希望您嘗試編寫(xiě)一個(gè)新規(guī)則，該規(guī)則將覆蓋默認(rèn)情況下應(yīng)用于鏈接的顏色和背景顏色。 您可以使用我們?cè)?a href="#Controlling_inheritance"> Controlling_inheritance 部分中查看的一個(gè)特殊值，在新規(guī)則中編寫(xiě)聲明，該聲明會(huì)將背景顏色重置為白色，而不使用實(shí)際 顏色值？

如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。 如果您遇到問(wèn)題，請(qǐng)按顯示解決方案按鈕查看一個(gè)潛在的答案。

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><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></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;">#outer div ul .nav a {
  background-color: blue;
  padding: 5px;
  display: inline-block;
? margin-bottom: 10px;
}

div div li a {
  color: yellow;
}</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
?   <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
? htmlInput.value = htmlCode;
? cssInput.value = cssCode;
? drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = '#outer #inner a {\n? background-color: initial;\n? color: red;\n}\n\n#outer div ul .nav a {\n  background-color: blue;\n  padding: 5px;\n? display: inline-block;\n? margin-bottom: 10px;\n}\n\ndiv div li a {\n  color: yellow;\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

下一步是什么

如果你理解這篇文章的大部分內(nèi)容，那么做得很好 - 你已經(jīng)開(kāi)始熟悉CSS的基本機(jī)制。 中心理論的最后一點(diǎn)是盒子模型，我們將在下面討論。

如果你沒(méi)有完全理解級(jí)聯(lián)，特異性和繼承，那么不要擔(dān)心！ 這絕對(duì)是我們?cè)谡n程中覆蓋的最復(fù)雜的事情，甚至是專(zhuān)業(yè)的網(wǎng)絡(luò)開(kāi)發(fā)人員有時(shí)候會(huì)發(fā)現(xiàn)棘手的東西。 我們建議您在繼續(xù)學(xué)習(xí)本課程的同時(shí)回到這篇文章，并繼續(xù)思考。 回到這里，如果你開(kāi)始遇到奇怪的問(wèn)題，樣式不按預(yù)期應(yīng)用。 這可能是一個(gè)特殊性問(wèn)題。