CSS 7.4 选择器-后代选择器

CSS 7.4 选择器-后代选择器

 

1.后代选择器又称为包含选择器。可以选择作为某元素后代的元素。

格式：元素1  元素2  元素3··· {声明}

例如：h1  em { color：red；}

解释：

把作为h1元素的后代元素em的文本变成红色。

HTML中：

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

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

 

2.具体应用

①p.a  span.a { color：red；}

HTML中：

<p class=“a”>····<span class=“a”>···</span>····</p>  //可以匹配

<p class=“a”>····<span class=“b”>···</span>····</p>  //不可以匹配

<p class=“a”>····<span >···········</span>····</p>  //不可以匹配

<p class=“b”>····<span class=“a”>···</span>····</p>  //不可以匹配

<p>·············<span class=“a”>···</span>····</p>  //不可以匹配

②div.sidebar a:link { color：red；}

HTML中：

<div class=“sidebar”>········<a href=“地址”>···</a>····</div> //可以匹配

<div class=“maincontent”>····<a href=“地址”>···</a>····</div> //不可以匹配

注：div.sidebar边栏块；div.maincontent主区块；a:link普通未被访问的链接。

③p span em { color：red；}

HTML中：

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

④后代选择器中两个元素之间的层次间隔可以是无限的，例如：

ul  em {color：red；}

HTML中：

<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>