如何使用：nth-​​child替代行

Question

我想为我的手风琴设置上边界和下边界样式，以实现偶数行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>

css

.accordion-card-header {
boder-top: 1px solid red;
border-bottom: 1px solid red;
}

Answer 1

您快到了。您需要使用: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>