我正在閱讀有關繼承關鍵字的 MDN 檔案，其中的示例讓我感到非常困惑，任何人都可以向我解釋 MDN 檔案中關于從規則中排除選定元素的確切示例。謝謝你。
例子
從規則中排除所選元素
/* Make second-level headers green */
h2 { color: green; }
/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 { color: inherit; }
在這個例子中，側邊欄內的 h2 元素可能是不同的顏色。例如，如果其中一個是與規則匹配的 div 的子級......
div#current { color: blue; }
......它會是藍色的。
這是我第一次提問，所以請不要介意我的格式。
uj5u.com熱心網友回復：
讓我們在這個片段中一步一步來：
/* Make second-level headers green */
h2 {
color: green;
}
/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 {
color: inherit;
}
div#current {
color: blue;
}<h2>this is an h2 outside the sidebar so it should have the color set for h2 in the style sheet which is green.</h2>
<div id="sidebar">
<h2>This is an h2 inside the sidebar so it has inherited its parent's color - which in this example is the default which is black</h2>
<div id="current">
<h2>This is an h2 inside a div. The div has id current and color blue. This h2 has inherited its parent's color which is blue.</div>
</div>uj5u.com熱心網友回復：
你在找這個例子嗎？
h2 {
color: green;
}
.sidebar h2 {
color: inherit;
}
.sidebar {
color: blue;
}
.red {
color: red;
}<h2>This is Green Heading</h2>
<div class="sidebar">
<h2>This is Blue Heading</h2>
<div class="red">
<h2>This is Red Heading</h2>
</div>
</div>uj5u.com熱心網友回復：
第一個 h2 元素將是綠色的，因為它有一個 css 規則。例如，第二個 h2 變成黑色，因為他繼承了規則，所以他得到了他父母的顏色。
如果側邊欄有另一個已宣告顏色的父項，則 h2 獲得此顏色
h2 {
color: green
}
div#current {
color: blue;
}
.sidebar h2 {
color: inherit
}<h2> Green </h2>
<div class="sidebar">
<h2>Default color</h2>
</div>
<div id="current">
<div class="sidebar">
<h2>Default color</h2>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358486.html
上一篇：<inputoninput="this.value=this.value.toUpperCase()"/>不應該在“UI”上進行文本轉換，而是將upperCase值發送
下一篇：為表單中的x輸入重復影像