Html 如何在CSS中选择兄弟姐妹的第一个子级

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

我试图选择最后一个孩子和第一个孩子，但只选择了最后一个孩子，没有选择第一个孩子

HTML:

文件
你好
孩子2
孩子1
孩子2
孩子2
孩子2
孩子1
孩子1
孩子2
孩子2

CSS

.parrent>div{
颜色：绿色；
}
.child1~.child2:第一个孩子{
颜色：红色；
}
.child1~.child2:最后一个孩子{
颜色：红色；
}

我希望选择

.child2

的所有第一个和最后一个孩子，这些孩子是

的兄弟姐妹（他们在
.child1

但我得到了：
没有可执行此操作的选择器

：第一个子元素
表示“父元素的第一个子元素”而不是“同时满足某些其他条件的父元素的第一个子元素”

你可以这样做：

.child1 ~ .child2 {
    color: red;
}

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

i、 e.将所有后续子项2更改为红色，然后覆盖第一个匹配子项2之后的子项2。
元素顺序可以不同，以及如何在
.child1
之后更改最后一个子元素
.child2
的样式？可能您的显示逻辑不是CSS设计用来处理的，您应该编写JS将新类添加到DOM以表达它。并且不要说“父元素的第一个子元素也满足某些其他条件”实际上是不准确的，因为如果该元素属于不同的类型，结果将不同（您将看到
child2
是否为例如a
p
）@LGSon-No。给定：
，则
p:第一个孩子
将不匹配任何内容。
p
是第二个孩子。这不是第一个孩子。没有选择符表明第一个孩子是p。（
p:first child
表示第一个孩子，如果它也是p）哦，是的，我忘了第一个类型。但这是另一个特定的条件，不能解决OP所问的问题（即类名）。没有一个适用于任意的其他条件。很高兴你发现了明显的重复。我没有。@MihaiT，不，不是，这是不同的情况