CSS選取器總結

 

 

 

CSS 後代選取器

 

後代選取器（descendant selector）又稱為包含選取器。

 

 

h1 em {color:red;}

<h1>This is a <em>important</em> heading</h1>
有關後代選取器有一個易被忽視的方面，即兩個元素之間的層次間隔可以使無限的。
例如，如果寫作 ul em，這個文法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深。
因此，ul em 將會選擇以下標記中的所有 em 元素：
<ul>  <li>List item 1    <ol>      <li>List item 1-1</li>      <li>List item 1-2</li>      <li>List item 1-3        <ol>          <li>List item 1-3-1</li>          <li>List item <em>1-3-2</em></li>          <li>List item 1-3-3</li>        </ol>      </li>      <li>List item 1-4</li>    </ol>  </li>  <li>List item 2</li>  <li>List item 3</li></ul>

 
 
CSS 子項目選取器
子項目選取器（Child selectors）只能選擇作為某元素子項目的元素。
 
例如，如果您希望選擇只作為 h1 元素子項目的 strong 元素，可以這樣寫：
h1 > strong {color:red;}
這個規則會把第一個 h1 下面的 strong 元素變為紅色，但是第二個 strong 不受影響：
<h1>This is <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1>
CSS 相鄰兄弟選取器
相鄰兄弟選取器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。

如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}