鉴于以下代码段,我希望包含“Award 1”的div具有红色背景色。有人可以向我解释为什么不呢?第一个项目应该有一个边框顶部。
.item-wrap:first-child .item {
border-top: 1px solid black;
}
.item {
width: 100%;
border-bottom: 1px solid black;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
答案 0 :(得分:1)
你需要用这样的父div包装子元素,
<强> HTML 强>
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
</div>
<强> CSS 强>
.item-wrap:first-child .item {
background-color:red;
}
答案 1 :(得分:1)
:first-child CSS伪类表示作为其父元素的第一个子元素的任何元素。
:第一个孩子(https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child)
在您的示例中,您尝试选择类.item
的元素,该元素位于具有类.item-wrap
的父级中,该类本身是其父级的第一个子级(在本例中为{{1} }})。由于.awards
不是.item-wrap
的第一个孩子,因此不匹配。
鉴于您的标记,以下规则应符合您的需求:
.awards
.awards :first-child + .item-wrap .item:first-child {
border-top: 1px solid black;
}
.item {
width: 100%;
border-bottom: 1px solid black;
}
这将选择一个类<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
的元素,该类是其父.item
的第一个子元素,其前面是属于具有类.item-wrap
的元素的第一个子元素。
答案 2 :(得分:0)
.item-wrap:nth-child(2){
background: red;
}
&#13;
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
&#13;
答案 3 :(得分:0)
.item:first-child{
color: red;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
<div class="item">Award 1a</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
<div class="item">Award 2a</div>
</div>
</div>
将选择器放在子项上,而不是父项(http://codepen.io/anon/pen/vNQamR):
.item:first-child{
color: red;
}