Design Code 設計密碼

選擇子元素

如果您不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

例如，如果您希望選擇只作為h1 元素子元素的strong 元素，可以這樣寫：

h1 <span class="marked">></span> strong {color:red;}
	

這個規則會把第一個h1 下面的兩個strong 元素變為紅色，但是第二個h1 中的strong 不受影響：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
	

語法解釋

您應該已經註意到了，子選擇器使用了大於號（子結合符）。

子結合符兩邊可以有空白符，這是可選的。因此，以下寫法都沒有問題：

h1 > strong
h1> strong
h1 >strong
h1>strong
	

如果從右向左讀，選擇器h1 > strong 可以解釋為“選擇作為h1 元素子元素的所有strong 元素”。

結合後代選擇器和子選擇器

請看下面這個選擇器：

table.company td > p
	

上面的選擇器會選擇作為td 元素子元素的所有p 元素，這個td 元素本身從table 元素繼承，該table 元素有一個包含company 的class 屬性。