css派生選擇器怎麼用

css派生選擇器的使用方法：派生選擇器允許根據文件的上下文關係來確定某個標籤的樣式，透過合理地使用派生選擇器，可以使HTML程式碼變得更加整潔。

（推薦教學：css影片教學）

css衍生選擇器的使用方法：

透過依據元素在其位置的上下文關係來定義樣式，你可以讓標記更簡潔。

在 CSS1 中，透過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由於它們依賴上下文關係來應用或避免某項規則。在 CSS2 中，它們稱為衍生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。

派生選擇器可讓你根據文件的上下文關係來決定某個標籤的樣式。透過合理地使用衍生選擇器，我們可以使 HTML 程式碼變得更加整潔。

比方說，你希望清單中的strong 元素變成斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

請注意標記為<strong></strong> 的藍色程式碼的上下文關係：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

在上面的範例中，只有li 元素中的strong 元素的樣式為斜體字，無需為strong 元素定義特別的class或id，程式碼更簡潔。

再看看下面的 CSS 規則：

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

下面是它施加影響的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2 id="This-nbsp-subhead-nbsp-is-nbsp-also-nbsp-red">This subhead is also red.</h2>
<h2 id="The-nbsp-strongly-nbsp-emphasized-nbsp-word-nbsp-in-nbsp-this-nbsp-subhead-nbsp-is-strong-blue-strong">The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

以上是css派生選擇器怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！