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>
            </>
          )
        })}