Selectutorial: 后代选择器

后代选择器

后代选择器用来在一个文档树中选择另一个元素的后代元素。

例如，您可能希望在一个页面中获取一个特定的元素，而非所有元素。一个样本文档可以包含一下代码：


		<body>

		<h1>Heading <em>here</em> </h1>

		<p>Lorem ipsum dolor <em>sit</em> amet.</p>


		</body>

文档树图标为：

Document tree showing descendant selectors

如果您使用了如下的元素选择器，您将获取页面中的所有的元素：


		em {color: blue; }

但是，如果您使用了后代选择器，您就可以定义您所选的元素。下面的规则将选择作为元素后代的元素。如果这条规则被使用，那么包含在<h1>元素内部的元素的字体就不会被设置为蓝色。


		p em {color: blue; }

您也可以跳过文档树结构中的层来选取后代。例如以下代码：


		<body>


		<p>Lorem ipsum dolor <em>sit</em> amet.</p>

		<ul>

		<li>item 1</li>


		<li>item 2</li>

		<li><em>item 3</em></li>

		</ul>


		</body>

文档树为：

Document tree showing descendant selectors

应用这条规则您可以将<ul>元素内部的元素分离出来，无需描述元素。如果这条规则被定义了，那么位于<ul>内部的元素的字体颜色都将被设为蓝色。可是，位于元素内部的元素将不会被设为蓝色：


		ul em {color: blue; }

后代选择器对于标准兼容浏览器都支持得很好。

Selectutorial - CSS 选择器

后代选择器

更多信息