Reactjs 中偶数/奇数 Div 的样式

Question

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

 .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)将始终被选中。

如果您想将 select .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>
            </>
          )
        })}