Question

在下面的标记中，我想将css应用于只有类.box的div，它在.wrap 之后立即。如果它出现在<p>或除.wrap之外的任何其他类之后，我不想选择它。

<div class="wrap"> <div class="box">Apply style to this box</div> <p>random</p> <div class="box">Do not apply style to this box</div> </div>

我试图查看相邻的兄弟选择器，但在这种情况下似乎不起作用。

.wrap + .box{ background: red; }

JSFiddle： http://jsfiddle.net/8fjuz7sm/

我无法使用:first-child，因为它也只能出现一次。

Answer 1

写：

.wrap .box:first-of-type{
    background:red;
}

DEMO here

OR

.wrap .box:nth-of-type(1){
    background:red;
}

DEMO here

Answer 2

正如@Hiral所说，您必须使用first-of-type或nth-of-type(1)。

如果您无法执行此操作，但可以访问html，则必须在要应用该类的元素上添加另一个类，例如

<div class="wrap">
<div class="box red">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>

或者您可以使用javascript和/或jquery选择第一个元素，然后通过javascript应用样式。

Jquery示例

$(".wrap .box").eq(0).css("Background-color","red")

Answer 3

我编辑了你的JSFIDDLE：http://jsfiddle.net/8fjuz7sm/4/

我建议使用jQuery，因为旧浏览器可能不支持纯css解决方案：

创建一个新类：

.wrapperbox {
    background: red;
}

然后将此jQuery代码添加到您的脚本中：

$( ".wrap > .box:first" ).addClass( "wrapperbox" );

在此之后，每个带有子包的类包装的html元素都会得到一个类包装盒，你可以在那里做你的css

当你不想做jQuery时，你可以使用它：

.wrap .box:first-of-type{
    background:red;
}

它将使用类名框选择包装的第一个子项，然后执行css

选择特定课程后的第一堂课

3 个答案: