包含选择器

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

定义和用法

• EF称为嵌套选择器或后代选择器。它用于选择元素内部的元素。
• 我们可以使用后代选择器来根据它的状态选择一个元素作为另一个元素的后代。
• 匹配的元素可以是祖先元素的孩子，孙子，曾孙等等

语法:

E F{sRules}

选择所有被E元素包含的F元素。

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“...在...找到”、“...作为...的一部分”、“...作为...的后代”，但是要求必须从右向左读选择器。

包含选择与子选择器的不同

与子选择符(E>F)不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

<div class="demo">
	<p>0</p>
	<div>
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</div>
</div>



/* 包含选择符(E F) */
.demo p { border:1px solid #f00; }

/* 子选择符(E>F) */
.demo > p{border:1px solid #f00;}

此例，如果是包含选择符，那么0，1，2，3都有边框；如果是子选择符，那么只有0有边框，即只有子元素会被命中；

浏览器支持

所有浏览器都支持

例子

选择具有hometown值的元素

如果写作 ul 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>