css派生選擇器的使用方法:派生選擇器允許根據文件的上下文關係來確定某個標籤的樣式,透過合理地使用派生選擇器,可以使HTML程式碼變得更加整潔。
(推薦教學:css影片教學)
css衍生選擇器的使用方法:
透過依據元素在其位置的上下文關係來定義樣式,你可以讓標記更簡潔。
在 CSS1 中,透過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors),這是由於它們依賴上下文關係來應用或避免某項規則。在 CSS2 中,它們稱為衍生選擇器,但是無論你如何稱呼它們,它們的作用都是相同的。
派生選擇器可讓你根據文件的上下文關係來決定某個標籤的樣式。透過合理地使用衍生選擇器,我們可以使 HTML 程式碼變得更加整潔。
比方說,你希望清單中的strong 元素變成斜體字,而不是通常的粗體字,可以這樣定義一個派生選擇器:
li strong { font-style: italic; font-weight: normal; }
請注意標記為8e99a69fbe029cd4e2b854e244eab143
的藍色程式碼的上下文關係:
<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>This subhead is also red.</h2> <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
以上是css派生選擇器怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!