什么是CSS后代选择器？

HTML文档的结构与家谱相似。 在你的家庭中，你有你的父母和其他人。 这些是你的祖先。 孩子和那些在树上追随你的人是你的后代。 HTML以类似的方式工作。 其他元素内的元素是它们的后代。 例如，由于几乎每个HTML元素都在标记内，它们将是元素的后代。 这种关系对于了解何时开始使用CSS并需要定位特定元素以应用视觉样式非常重要。

CSS后代选择器

CSS后代选择器应用于另一个元素内部的元素（或者更准确地说，一个元素是另一个元素的后代）。 例如，一个无序列表中有一个标签，其标签为后代。 我们以下面的HTML为例：

• 这是一个链接

  LI标签是UL标签的后代。 A标签是LI（子代后代）和UL（孙代后代）标签的后代。 如果你考虑使用族谱例子来考虑这个问题，那么

  将是父对象，
  • 将是该元素的子对象，将是
  • 的子对象和
    。

    那么，如何使用这些后代选择器来定位网页中的特定元素？ 首先，你必须使用两个（或更多）类型选择器来定义后代选择器，这些选择器之间用空格分隔。

    li a {text-decoration：none; }

    在该示例中，样式仅适用于作为列表项元素（

    • ）的后代的链接元素（）。 页面上不是列表项的后代的所有其他链接都不会获得此样式。

      需要记住的一件重要的事情是，它们可以在后代选择器中使用的标签之间有多少标签并不重要。 如果第二个元素被封闭在第一个元素的任何地方，它将被选为后代。

      如果你想选择ul元素后面的所有锚点，你可以这样写：

      ul a {text-decoration：none; }

      现在，这些样式将应用于作为列表项的后代的任何链接。 你也可以写这个选择器

      ul li a {text-decoration：none; }

      这是使用多于两个类型选择器的后代选择器。 在这种情况下，这将适用于作为列表项目并位于无序列表内部的链接。

      使用类选择器和ID选择器

      您从下降的选择器不必始终是类型的后代。 例如，假设您拥有ID为“广告牌”的网站区域（如分部）。 你可以设置一个后代选择器，关闭该ID：

      #billboard ul {background-color：#ccc; }

      这将设置无序列表，该列表是ID为“广告牌”的元素的后代。 你可以对类的值做同样的事情。

      div.billboard ul {background-color：#ccc; }

      这假定该部门具有“广告牌”的等级值。 上面的CSS可以设置具有此类值的任何分区内的

      元素。

      你可能会非常沉重，并且会对后代选择器产生冗长的影响。 例如，如果您使用Dreamweaver编写HTML代码 ，则添加新的CSS规则时会有一个设置，这些规则将根据您在该页面上放置光标自动创建选择器。 在这种情况下， Dreamweaver所做的是创建一个非常详细且冗长的后代选择器。 对于你的CSS来说 ，这些特性并不是必须的。 你想要做的是找到一个足够具体的后代选择器之间的平衡，这样你就可以深入到你需要的确切元素（没有你不希望影响的元素的样式），而没有CSS选择器过度的规则大。