34、CSS 选择器与样式优化全解析

CSS 选择器与样式优化全解析

1. 后代选择器的使用

在 CSS 中，我们常常需要一种方式来选择特定元素的后代元素。例如，以下代码展示了如何使用后代选择器：

div h2 {
    color: black;
}

在这个规则中，我们选择了所有 <div> 元素的后代 <h2> 元素，并将它们的文本颜色设置为黑色。需要注意的是，在父元素名和后代元素名之间要留一个空格。

不过，这种选择器可能会带来一些问题。如果在 HTML 文件中创建了另一个 <div> ，其中的 <h2> 文本也会变成黑色，即使我们并不希望这样。为了解决这个问题，我们可以使用元素的 id 属性来更精确地选择后代元素：

#elixirs h2 {
    color: black;
}

这里，我们选择了 id 为 elixirs 的元素的后代 <h2> 元素，这样就不会影响其他 <div> 中的 <h2> 元素了。

1.1 选择特定元素的后代

如果我们要选择 id