CSS 7.5 選擇器-子元素、相鄰兄弟和普通兄弟選擇器

1.子元素選擇器。選擇作為某元素的子元素的元素。

格式：父元素 > 子元素 {宣告}

例如：

h1 > strong { color：red；}

HTML中：

<h1>·············<strong>···</strong>·············</h1>     //可以匹配

<h1>····<em>···<strong>···</strong>···</em>····</h1>     //不可以匹配

注1：與後代選擇器的區別在於，子元素選擇器兩個元素只能是父子關係，而後代選擇器只要是後代就行了。在上例中，<strong>是<em>的兒子，是<h1>的孫子。

注2：若<h1>中有多個<strong>，全部選擇。例如

<h1>···<strong>···</strong>···<strong>··</strong>···</h1>  //可以匹配

2.相鄰兄弟選擇器。選擇有相同父元素的兩個挨著的元素的後一個元素。

格式：元素1 + 元素2 {宣告}

例如1：

h1 + p { color：

HTML中：

<h1>······</h1>

<p>·······</p> //可以匹配

<a>······</a>

<p>·······</p> //不可以匹配

例如2：

li + li { color：red；}

HTML中：

<ul>

  <li>······</li>

  <li>······</li>  //可以匹配，上一個<li>的兄弟

  <li>······</li>  //可以匹配，上一個<li>

</ul>

3.普通兄弟選擇器。選擇有相同父元素的兩個元素中，第一個元素後所有的第二個元素。

格式：元素1 ~ 元素2 { color：red；}

例如：

h1 ~ p { color：red；}

HTML中：

<h1>······</h1>

<p>·······</p> //可以匹配

<a>······</a>

<p>·······</p> //可以匹配

<h2>······<p>···</p>······</h2> //不可以匹配

4.不論是後代選擇器，子元素選擇器，相鄰兄弟選擇器還是普通兄弟選擇器，

選擇的都是：最後面的（挨著花括號的）元素。

5.選擇器可以組合使用，例如：

div.maincontent  h1 + p > a:link