（基礎）特殊的上下文選擇符

李鬆峰發表於2012-11-10

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第2章。

剛才，我們學習的上下文選擇符是以某個祖先標籤作為上下文。只要有標籤在它的層次結構“上游”存在這麼一個祖先，那麼就會選中該標籤。無論從該標籤到作為祖先的上下文之間隔著多少層次都沒有關係。不過，有時候我們可能還會需要比“某些祖先”更加具體的上下文。比如說吧，要是你想根據父元素或者同胞元素的標籤名來選擇元素怎麼辦呢？

下面我們再用另一段標記來演示幾種特殊的上下文選擇符。

<section>
    <h2>An H2 Heading</h2>
    <p>This is paragraph 1</p>
    <p>Paragraph 2 has <a href="#">a link</a> in it.</p>
    <a href="#">Link</a>
</section>

2.3.1 子選擇符>

標籤1 > 標籤2

標籤2必須是標籤1的子元素，或者反過來說，標籤1必須是標籤2的父元素。與常規的上下文選擇符不同，這個選擇符中的標籤1不能是標籤2的父元素之外的其他祖先元素。

section > h2 {font-style:italic;}

圖2-10展示了以上規則的結果。

enter image description here
圖2-10 h2是section的子元素，故而被選中

2.3.2 緊鄰同胞選擇符+

標籤1 + 標籤2

標籤2必須緊跟在其同胞標籤1的後面。

h2 + p {font-variant:small-caps;}

圖2-11展示了這條規則的效果。

enter image description here
圖2-11 第一個p由於是h2的緊鄰同胞而被選中

2.3.3 一般同胞選擇符~

標籤1 ~ 標籤2

標籤2必須跟（不一定緊跟）在其同胞標籤1後面。

用Shift+1鍵左側的鍵輸入字元～（波浪號）。

h2 ~ a {color:red;}

圖2-12展示了這條規則的效果。

enter image description here
圖2-12 只選中了同胞元素

2.3.4 通用選擇符*

* （按Shift+8）

通用選擇符*（常被稱為星號選擇符）是一個萬用字元，它匹配斜體元素，因此下面這條規則

* {color:green;}

會導致所有元素（的文字和邊框）都變成綠色。不過，一般在使用*選擇符時，都會同時使用另一個選擇符，比如：

color屬性設定的是前景色。前景色既影響文字也影響邊框，但人們通常只用它設定文字顏色。

p * {color:red;}

這樣只會把p包含的所有元素的文字變成紅色。

這個選擇符有一個非常有意思的用法，即用它構成非子選擇符，比如：

section * a {font-size:1.3em;}

enter image description here
圖2-13 只選中了孫子元素，並未選中子元素

如圖2-13所示，任何是section孫子元素，而非子元素的a標籤都會被選中。至少a的父元素是什麼，沒關係。

總之，只有一個標籤名的選擇符會選中頁面中所有相同標籤的例項。而通過上下文選擇符，則可以指定標籤必須具備相應的祖先或同胞。

相關文章