HTML文档的结构类似于家谱。在您的家庭族谱中，您有父母、祖父母和更早的先辈，这些是你的祖先。孩子和孩子的后代都是你的后代。HTML以非常类似的方式工作。其他元素内部的元素是它们的后代。例如，由于几乎每个HTML元素都在<body>标记内，因此它们将是该<body>元素的后代。当您开始使用CSS并需要定位特定元素以应用视觉样式时，了解这种关系非常重要。
CSS后代选择器适用于另一个元素内部的元素（或更准确地说，是另一个元素的后代元素）。例如，无序列表具有带有后代标签的标签。让我们以以下HTML为例：
<ul>
<li> <a href="">这是一个链接</a> </ li>
</ ul>
如果您使用家谱树示例对此进行思考，将是该元素的孩子，而将是该元素的孩子。那么，如何使用这些后代选择器来定位网页中的特定元素？首先，您必须使用两个（或多个）以空格分隔的类型选择器来定义后代选择器。
在该示例中，样式仅适用于链接元素（<a>），该元素是列表项元素（<li>）的后代。页面上不是列表项的后代的所有其他链接都不会获得此样式。
要记住的一件事是，在后代选择器中使用的标签之间有多少个标签并不重要。如果第二个元素包含在第一个元素内的任何位置，它将被选作后代。
如果要选择从ul元素派生的所有锚，则应编写：display:no。现在，这些样式将应用于作为列表项后代的任何链接。您也可以编写此选择器这是一个后代选择器，它使用两个以上的类型选择器。在这种情况下，这将适用于列表项内部和无序列表内部的链接。
您从其派生的选择器不必始终是类型后代。例如，假设您的站点区域（如部门）的ID属性为“广告牌”。您可以根据该ID设置后代选择器。这将设置无序列表的样式，该列表是ID为“广告牌”的元素的后代。您可以对类值执行相同的操作。假设该部门的分类值为“广告牌”。上面的CSS将在具有该类值的任何分区内设置<ul>元素的样式。
使用后代选择器，您会变得很笨拙且冗长。例如，如果使用Dreamweaver编写HTML代码，则添加新CSS规则时会有一个设置，该规则将基于光标在该页面上的位置自动创建选择器。什么Dreamweaver中确实在此情况下，是创建一个疯狂冗长而漫长的后代选择。CSS不需要那么多的特异性。您想要做的是找到足够具体的后代选择器之间的平衡，以便您可以向下钻取到所需的确切元素（不希望影响样式的元素），而无需让CSS规则的选择器过多大。