CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器

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：red；}

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.不论是后代选择器，子元素选择器，相邻兄弟选择器还是普通兄弟选择器，

选择的都是：后面的元素

h1   strong { color：red；}

h1 > strong { color：red；}

h1 + p { color：red；}

h1 ~ p { color：red；}

5.选择器可以组合使用，例如：

div.maincontent  h1 + p > a:link