我想为我的手风琴设置上边界和下边界样式,以实现偶数行Ex:2、4、6等。
我尝试使用:nth-child
,但它没有反映出我的父母div
,但是反映了我的孩子。
<div className="accordion" id="adsdfsdf">
<div className="accordionitem">
<div className="accordion-card">
<div className="accordion-card-header" id="aada">
<h3 className="mb-0 w-100">
<a
className="collapsed"
role="button"
>
<span className="icon-left">
<i className=" a-minus" />
<i className="a-plus" />
</span>
</a>
</h3>
</div>
</div>
</div>
<div className="accordion" id="adsdfsdf">
<div className="accordionitem">
<div className="accordion-card">
<div className="accordion-card-header" id="aada">
<h3 className="mb-0 w-100">
<a
className="collapsed"
role="button"
>
<span className="icon-left">
<i className=" a-minus" />
<i className="a-plus" />
</span>
</a>
</h3>
</div>
</div>
</div>
.accordion-card-header {
boder-top: 1px solid red;
border-bottom: 1px solid red;
}
答案 0 :(得分:4)
您快到了。您需要使用:nth-child(even)
设置偶数行样式,使用:nth-child(odd)
设置奇数行样式。有关更多参考,您可以浏览nth-child() Selector
这是一个小演示
div:nth-child(odd) {
height: 100px;
width: 100px;
background: yellow;
margin: 20px auto;
}
div:nth-child(even) {
height: 100px;
width: 100px;
background: green;
border-top: 5px solid black;
border-bottom: 5px solid red;
margin: 20px auto;
}
<div>odd</div>
<div>even</div>
<div>odd</div>
<div>even</div>