HTML文档的结构类似于族树。在你的家庭中，你有你的父母和其他人。这些是你的祖先。孩子和那些在你那棵树上追随你的人是你的后代。 HTML以类似的方式工作。其他元素内部的元素是它们的后代。例如，因为几乎每个HTML元素都在其中
标签，他们将是其后代 元素。当您开始使用CSS并且需要定位特定元素以应用视觉样式时，这种关系非常重要。CSS后代选择器
CSS后代选择器适用于另一个元素内部的元素（或者更准确地说，是另一个元素的后代元素）。例如，无序列表具有标记作为后代的标记。我们使用以下HTML作为示例：
- 这是一个链接
该 李 标签是后代的 UL 标签。该 一个 标签是。的后代 都 该 李 （儿童后裔）和 UL （孙子后裔）标签。如果你考虑使用家谱例子考虑这个问题，那么
- 将是父母，
- 将是那个元素的孩子，并且将是孩子的孩子
- 和孙子孙女
- .
- ）。页面上不是列表项后代的所有其他链接都不会获得此样式。
需要记住的一件重要事情是，它们在您的后代选择器中可能使用的标签之间有多少标签无关紧要。如果第二个元素包含在第一个元素中的任何位置，则它将被选为后代。
如果要选择所有来自ul元素的锚点，您可以编写：
ul a {text-decoration：none; }
现在，这些样式将应用于作为列表项后代的任何链接。你也可以写这个选择器
ul li a {text-decoration：none; }
这是一个使用两个以上类型选择器的后代选择器。在这种情况下，这将适用于作为列表项内部以及无序列表内部的链接。
使用类选择器和ID选择器
您下降的选择器不必始终是类型后代。例如，假设您有一个ID属性为“billboard”的网站区域（如分区）。您可以设置该ID的后代选择器：
#billboard ul {background-color：#ccc; }
这将设置无序列表的样式，该列表是ID为“billboard”的元素的后代。您可以对类值执行相同的操作。
div.billboard ul {background-color：#ccc; }
这假设该部门的类值为“广告牌”。上面的CSS将样式
- 具有此类值的任何分区内的元素。
你可以通过后代选择器变得非常笨拙和冗长。例如，如果使用Dreamweaver编写HTML代码，则在添加新CSS规则时会有一个设置，该规则将根据光标在该页面上的位置自动创建选择器。 Dreamweaver在这个实例中所做的是创建一个冗长冗长的后代选择器。你的CSS工作不需要那么多的特殊性。你想要做的是找到一个足够具体的后代选择器之间的平衡，以便你可以深入到你需要的确切元素（没有你不希望影响的样式），而没有具有过度选择器的CSS规则大。
那么如何使用这些后代选择器来定位网页中的特定元素？首先，您必须使用由空格分隔的两个（或更多）类型选择器来定义后代选择器。
li a {text-decoration：none; }
在该示例中，样式仅适用于作为list-item元素的后代的link元素（）（
- ）。页面上不是列表项后代的所有其他链接都不会获得此样式。
