CSS 只在第一层子元素上应用样式

在本文中，我们将介绍如何使用CSS仅在第一层子元素上应用样式的方法。通常，我们希望只对直接嵌套在父元素下的子元素进行样式设置，而不影响孙子元素或更深层级的元素。下面将详细说明如何实现这一目标。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用子选择器

CSS中的子选择器（child selector）可用于选择只位于指定元素下一级的子元素。这个选择器以”>”符号表示，例如：

.parent > .child {
  /* 样式设置 */
}

在上面的例子中，”.parent”是指父元素的class，”.child”是指直接嵌套在父元素下的子元素的class。通过使用子选择器，我们只能选择第一层子元素，其他层级的元素不会被选中。

考虑以下示例HTML结构：

<div class="parent">
  <div class="child">
    <p>只有这个段落会受到样式的影响</p>
  </div>
  <div>
    <p>这个段落不会受到样式的影响</p>
  </div>
</div>

通过使用子选择器，我们可以对第一层子元素应用样式:

.parent > .child {
  background-color: yellow;
}

在上面的例子中，我们将第一层子元素的背景颜色设置为黄色。这意味着只有嵌套在具有”class=”parent””的元素下，且具有”class=”child””的子元素才会应用样式，因此只有第一个div中的段落会显示黄色背景。

子选择器的特点

有几点需要注意：

只有直接嵌套在父元素下的子元素才会被选中，孙子元素或更深层级的元素不会被影响。
子选择器只能选择第一层子元素，无法选择第二层及更深层级的子元素。
子选择器对于HTML结构的更改是敏感的，如果结构发生变化，可能需要重新调整样式。

使用:nth-child伪类选择器

除了使用子选择器，还可以使用:nth-child()伪类选择器来选择第一层子元素。这个伪类选择器可以选择某个元素在其父元素中的位置。

.parent > :nth-child(1) {
  /* 样式设置 */
}

在上面的例子中，”:nth-child(1)”表示选择父元素的第一个子元素。同样考虑以下示例https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML：

<div class="parent">
  <div>
    <p>这个段落不会受到样式的影响</p>
  </div>
  <div>
    <p>只有这个段落会受到样式的影响</p>
  </div>
</div>

通过使用:nth-child()伪类选择器，我们可以对第一层子元素应用样式：

.parent > :nth-child(2) {
  color: red;
}

在上面的例子中，我们将第一层子元素的文本颜色设置为红色。这意味着只有嵌套在具有”class=”parent””的元素下的第二个子元素中的段落才会显示红色文本。

:nth-child() 伪类的特点

需要注意以下几点：

通过选择某个元素在其父元素中的位置来进行选择，可以选择不同位置的子元素。
根据位置选择，不需要具体的class或id属性。
选择的位置从1开始，而不是从0开始。

示例：菜单样式

让我们以一个实际的例子来演示如何只在第一层子元素上应用样式。考虑以下菜单的HTML结构：

<ul class="menu">
  <li>首页</li>
  <li>产品
    <ul class="submenu">
      <li>产品1</li>
      <li>产品2</li>
      <li>产品3</li>
    </ul>
  </li>
  <li>关于</li>
  <li>联系我们</li>
</ul>

我们希望只在一级菜单项上应用样式，并保持二级菜单项不受影响。通过使用子选择器，我们可以轻松实现这一目标:

.menu > li {
  /* 样式设置 */
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
}

.menu > li:hover {
  background-color: #555;
  color: #fff;
}

.menu > li > .submenu {
  display: none;
}

.menu > li:hover > .submenu {
  display: block;
}

在上面的例子中，我们将一级菜单项的背景颜色设置为#ccc，将鼠标悬停时的背景颜色设置为#555，将文字颜色设置为#fff。此外，二级菜单项的初始显示设置为none，当鼠标悬停在一级菜单项上时显示。