css如何为具有相同类名的另一个元素的子元素的类指定样式

CSS 为相同类名的另一个元素的子元素指定样式

在 CSS 中，要为具有相同类名的另一个元素的子元素指定样式，可以使用以下几种方法：

1. 使用相邻兄弟选择器 (+)

.parent-class + .parent-class .child-class {
  /* 样式规则 */
}

这个选择器会选择紧跟在第一个 .parent-class 元素后面的另一个 .parent-class 元素中的 .child-class 子元素。

2. 使用通用兄弟选择器 (~)

.parent-class ~ .parent-class .child-class {
  /* 样式规则 */
}

这个选择器会选择所有在第一个 .parent-class 元素后面的 .parent-class 元素中的 .child-class 子元素。

3. 使用 :nth-child() 伪类

.parent-class:nth-child(n+2) .child-class {
  /* 样式规则 */
}

这个选择器会选择从第二个 .parent-class 元素开始的所有 .child-class 子元素。

4. 使用 :not(:first-child) 伪类

.parent-class:not(:first-child) .child-class {
  /* 样式规则 */
}

这个选择器会选择所有不是第一个 .parent-class 元素中的 .child-class 子元素。

示例代码

<div class="container">
  <div class="parent-class">
    <div class="child-class">第一个子元素</div>
  </div>
  <div class="parent-class">
    <div class="child-class">第二个子元素</div>
  </div>
  <div class="parent-class">
    <div class="child-class">第三个子元素</div>
  </div>
</div>

/* 方法1: 相邻兄弟选择器 */
.parent-class + .parent-class .child-class {
  color: red;
}

/* 方法2: 通用兄弟选择器 */
.parent-class ~ .parent-class .child-class {
  background-color: #f0f0f0;
}

/* 方法3: nth-child */
.parent-class:nth-child(n+2) .child-class {
  font-weight: bold;
}

/* 方法4: not first-child */
.parent-class:not(:first-child) .child-class {
  border: 1px solid blue;
}