如何在CSS中选择兄弟姐妹的第一个孩子[重复]答案

【问题标题】：How to select first child of sibling in CSS [duplicate]如何在CSS中选择兄弟姐妹的第一个孩子[重复]
【发布时间】：2020-02-15 10:51:36
【问题描述】：

我创建了几个具有不同类的子元素，我需要选择具有特定类名的第一个子元素，它是另一个具有不同类名的子元素的兄弟。如何在某个特定兄弟姐妹之后选择所有第一个和最后一个孩子？

我尝试选择最后一个孩子和第一个孩子，但只选择最后一个孩子，第一个孩子没有被选中

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>hello</h1>
    <div class="parrent">
        <div class="child2">child2</div>
        <div class="child1">child1</div>
        <div class="child2">child2</div>
        <div class="child2">child2</div>
        <div class="child2">child2</div>
        <div class="child1">child1</div>
        <div class="child1">child1</div>
        <div class="child2">child2</div>
        <div class="child2">child2</div>
    </div>
</body>
</html>

CSS

.parrent>div {
    color: green;
}

.child1 ~ .child2:first-child {
    color: red;
}

.child1 ~ .child2:last-child {
    color: red;
}

我希望选择.child2 的所有第一个和最后一个孩子，它们是.child1.child1 的兄弟（留在之后）

但我得到了：

【问题讨论】：

@MihaiT，不，不是，这是不同的情况

标签： html css css-selectors

【解决方案1】：

没有选择器可以做到这一点。

:first-child 表示“父元素的第一个子元素”而不是“父元素的第一个子元素同时满足一些其他条件”。

你可以这样做：

.child1 ~ .child2 {
    color: red;
}

.child1 ~ .child2 ~ .child2 {
    color: green;
}

即将 all 后续 child2 更改为红色，然后为第一个匹配 child2 之后的那些覆盖它。

【讨论】：

元素的顺序可以不同，.child1之后的最后一个子.child2如何改变样式？
可能你的显示逻辑不是 CSS 设计用来处理的，你应该编写 JS 来为你的 DOM 添加新的类来表达它。
而说不是“父元素的第一个子元素也满足一些其他条件”其实是不准确的，好像那个元素是不同的类型一样，结果会有所不同（您会看到child2 是否为p）
@LGSon — 否。给定：<div><span></span><p></p></div> 然后p:first-child 将不匹配任何内容。 p 是第二个孩子。这不是第一个孩子。没有选择器表示第一个孩子是 p。（p:first-child 表示第一个孩子，如果它是 also a p）
哦，是的，我忘记了 first-of-type。但这是特定的其他条件，而不是解决 OP 所询问的问题（即类名）的条件。没有任何其他条件。很高兴你发现了明显的重复。我没有。