Reactjs 中偶数/奇数 div 的样式

Question

我正在尝试设置奇数类和偶数类的样式，但代码未按预期工作。它将所有类都设计为一个。通过我的代码和输出，这将更容易理解。 输出： 代码：

.b1-segment:nth-child(even) .description-wrapper{
  color: white;
  float: left;
}
.b1-segment:nth-child(odd) .description-wrapper{
  color: black;
  float: right;
}

  {getallservices.map((service) => {

              return(
                <>
                <Fade bottom>
                   <section className="services banner-page about  b1-segment bg-fx" style={{ backgroundImage:   `url(${service.imgDesk.fluid.src})` }}>
                      <Container>
                        <Row>
                          <Col md={12}>
                              <div className="description-wrapper">
                                  <h3>{service.servicesHeading}</h3>
                                  <p>{service.description.description}</p>
                                  
                              </div>
                          </Col>
                        
                        </Row>
                      </Container>
                   </section>
                </Fade>
             
                </>

              )

            })}

Answer 1

<Fade bottom> 内.b1-segment 是唯一的孩子。所以.b1-segment:nth-child(odd)会一直被选中。

如果您想选择.b1-segment 作为直接子级，您必须将section 标记作为主要包装器。然后.b1-segment 将被视为子元素，在其中呈现并且您的 css 将起作用。

  {getallservices.map((service) => {

          return(
            <>
              <section className="services banner-page about  b1-segment bg-fx" style={{ backgroundImage:   `url(${service.imgDesk.fluid.src})` }}>
                <Fade bottom>
                  <Container>
                    <Row>
                      <Col md={12}>
                          <div className="description-wrapper">
                              <h3>{service.servicesHeading}</h3>
                              <p>{service.description.description}</p>  
                          </div>
                      </Col>
                    </Row>
                  </Container>
                </Fade>
              </section>
            </>
          )
        })}