CSS 平级和儿子级样式写法示例

CSS 中的选择器用于选择 DOM 的不同元素，并将样式应用于这些元素。选择器可以将样式应用于一个元素或多个元素，也可以用于选择同一个元素中的不同部分。

其中，平级和儿子级选择器是 CSS 中两种常见的选择器。

平级选择器

平级选择器是指选择 DOM 中的同级元素，使它们同时具有相同的样式。平级选择器用符号 “+” 表示，它仅选择紧接在前一个元素后出现的那个元素。

示例说明：

HTML 代码

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

CSS 代码

p + p {
  color: red;
}

上述代码中的 CSS 选择器 p + p 表示选中第一个 p 元素后面的紧接着的下一个 p 元素。这将会让第二个段落变成红色。

儿子级选择器

儿子级选择器是指选择某个元素的子元素，儿子级选择器用符号 “>” 表示。这种选择器只会选中第一层子元素，而不会选中层级更深的子元素。

示例说明：

HTML 代码

<div>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
  </ul>
</div>

CSS 代码：

div > ul {
  background-color: yellow;
}

上述代码中的 CSS 选择器 div > ul 表示选中 div 元素中的 ul 元素，并将其背景颜色设置为黄色。

以上就是关于 CSS 中平级和儿子级选择器的示例说明。