CSS 元素 + 元素选择器

简介

元素 + 元素选择器（也称为后代选择器），是 CSS 中一种基本的选择器，用于选取某个元素下的所有指定后代元素。

语法

element1 element2 {
  /* 样式规则 */
}

其中，element1 和 element2 分别为两个 HTML 元素的标签名，中间用空格隔开。element1 为父级元素，element2 为子级元素。样式规则可根据实际需求自由定义。

示例

假设有以下 HTML 代码：

<div class="parent">
  <h1>标题</h1>
  <p>段落内容</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

如果我们想要修改 ul 中的列表项样式，可以使用元素 + 元素选择器：

.parent li {
  color: red;
  font-size: 16px;
}

这样就可以将 .parent 下所有 li 元素的文本颜色改为红色，字号为 16px。

注意事项

• 元素 + 元素选择器选取的是后代元素，与层级无关。例如，.parent .child li 与 .parent li 的选取结果相同，都选取了 .parent 中的 li 元素。

• 元素 + 元素选择器具有传递性。例如，.grandparent .parent li 也会选取 .grandparent 下的 li 元素。

• 如果 element1 中有多个 element2，那么所有的 element2 都将受到样式规则的影响。

结论

元素 + 元素选择器是 CSS 中一种基础的选择器，用于选取某个元素下的所有指定后代元素。其语法简单，易于理解，但需要注意的是其传递性和样式规则的传递。当我们需要对某个元素下的所有后代元素进行样式设置时，可以使用元素 + 元素选择器。