Html css第一项选择的孙子

我是个笨蛋。 我想选择具有

向右箭头

的div，但它应该位于具有

活动

的div类中，作为div中的第一个子类

在这把小提琴中，只有3把应该是绿色的

HTML：

<div class="owl-stage">
<div class="owl-item">
1 
</div>
<div class="owl-item">
2 
</div>

<div class="owl-item active">
<div class="item">
 <div class="arrow-right">
3 

 </div>
</div>


</div>
<div class="owl-item active">
<div class="item">
 <div class="arrow-right">
4 
 </div>
</div>

<div class="owl-item active">
<div class="item">
 <div class="arrow-right">
5 

 </div>


</div>

</div>

---

您可以尝试以下方法：

.owl stage.owl item.arrow right{
背景色：红色；
颜色：蓝色；
}
/*这里有第一个活动类的选择器*/
.owl-stage.owl-item.active.向右箭头{
背景色：白色；
颜色：绿色；
}
/**/
/*您应该将stlye放回第一个选择器*/
.owl阶段.owl项目.active+.owl项目.向右箭头{
背景色：红色；
颜色：蓝色；
}

1.
2.
3.
4.
5.

您可以尝试以下方法：

.owl stage.owl item.arrow right{
背景色：红色；
颜色：蓝色；
}
/*这里有第一个活动类的选择器*/
.owl-stage.owl-item.active.向右箭头{
背景色：白色；
颜色：绿色；
}
/**/
/*您应该将stlye放回第一个选择器*/
.owl阶段.owl项目.active+.owl项目.向右箭头{
背景色：红色；
颜色：蓝色；
}

1.
2.
3.
4.
5.

一个问题是，您的HTML中似乎缺少

结束标记；当正确缩进时，这将变得可见。
我现在添加了

，所以如果我做错了，你应该大声喊出来

无论如何，答案是你想要的东西在CSS中是可能的，但前提是你使用了一个小技巧。显然，设计师们从未意识到这是必要的。诀窍是首先将“all.owl-item.active divs”着色，然后将颜色重置为“all.owl-item.active divs”的默认颜色，然后是其他.owl-item.active divs

.owl stage.owl-item.active{
背景色：红色；
颜色：蓝色；
}
.owl-stage.owl-item.active.向右箭头{
背景色：红色；
颜色：绿色；
}
.owl-stage.owl-item.active~.owl-item.active{
背景色：继承；
颜色：继承；
}
.owl-stage.owl-item.active~.owl-item.active.向右箭头{
背景色：继承；
颜色：继承；
}

1.
2.
3.
4.
5.

一个问题是，您的HTML中似乎缺少

结束标记；当正确缩进时，这将变得可见。
我现在添加了

，所以如果我做错了，你应该大声喊出来

无论如何，答案是你想要的东西在CSS中是可能的，但前提是你使用了一个小技巧。显然，设计师们从未意识到这是必要的。诀窍是首先将“all.owl-item.active divs”着色，然后将颜色重置为“all.owl-item.active divs”的默认颜色，然后是其他.owl-item.active divs

.owl stage.owl-item.active{
背景色：红色；
颜色：蓝色；
}
.owl-stage.owl-item.active.向右箭头{
背景色：红色；
颜色：绿色；
}
.owl-stage.owl-item.active~.owl-item.active{
背景色：继承；
颜色：继承；
}
.owl-stage.owl-item.active~.owl-item.active.向右箭头{
背景色：继承；
颜色：继承；
}

1.
2.
3.
4.
5.

我想在第一个活动的子级中抓住这个类“arrow right”。我想在第一个活动的子级中抓住这个类“arrow right”。这个类比temani的答案好，因为它是根据继承的原则工作的，而不是我显式地设置值。很奇怪：

.owl stage>。活动：不是（：最后一个孩子）。向右箭头{color:green；}

起作用，但

.owl stage>。活动：第一个孩子。向右箭头{color:green；}

没有。但是，如果您还将活动类添加到第一个/其他两个类中，它也会起作用，奇怪的是……应该起作用。@VXp这是因为在这个特定示例中，没有.active元素也是其父级（.owl stage）的第一个子级，虽然有一个.active元素是.owl-stage.Yea的最后一个子元素，但是：first子元素的逻辑应该是以它为目标，不管它在其父元素中的位置如何，但是如果我们考虑到您的语句，那么：first类型应该改为以它为目标，但它不是：first子元素不应该只以另一个，imho。@VXp抱歉，但我不确定我是否遵循了。这正是：第一个孩子的定义，即它是第一个孩子！那么你的定义是什么？这一个比temani的答案更好，因为它是基于继承的原则而不是我显式设置值。非常奇怪：

.owl stage>。活动：不是（：最后一个孩子）。向右箭头{color:green；}

起作用，但

.owl stage>。活动：第一个孩子。向右箭头{color:green；}

没有。但是，如果您还将活动类添加到第一个/其他两个类中，它也会起作用，奇怪的是……应该起作用。@VXp这是因为在这个特定示例中，没有.active元素也是其父级（.owl stage）的第一个子级，虽然有一个.active元素是.owl-stage.Yea的最后一个子元素，但是：first子元素的逻辑应该是以它为目标，不管它在其父元素中的位置如何，但是如果我们考虑到您的语句，那么：first类型应该改为以它为目标，但它不是：first子元素不应该只以另一个，imho。@VXp抱歉，但我不确定我是否理解。这就是：first-c的定义

.owl-stage .owl-item.active:first-child {

background-color:red;
color:blue;

}


.owl-stage .owl-item.active:first-child .arrow-right {
background-color:red;
color:Green;

}