html - 如何将 :nth-child 用于交替行

Question

我想为偶数行设置边框顶部和边框底部的手风琴样式，例如：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;
}

标签： htmlcss

Answer 1

你快到了。您需要用于:nth-child(even)设置偶数行:nth-child(odd)的样式和奇数行的样式。如需进一步参考，您可以通过nth-child() 选择器

这是一个小演示

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>