[英]Styling of Even/Odd Divs in Reactjs
I am trying to style the odd and even classes but the code is not working as intended.我正在尝试设置奇数类和偶数类的样式,但代码没有按预期工作。 Its styling all the classes as one.
它将所有类都设计为一个。 This will be more understandable through my code and output.
这通过我的代码和 output 会更容易理解。 OUTPUT:
OUTPUT:
CODE:
代码:
.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> </> ) })}
Within <Fade bottom>
.b1-segment
is the only child.在
<Fade bottom>
.b1-segment
是唯一的孩子。 So .b1-segment:nth-child(odd)
will always be selected.所以
.b1-segment:nth-child(odd)
将始终被选中。
If you want to select .b1-segment
as direct child you have to make the section
tag as main wrapper.如果您想将 select
.b1-segment
作为直接子项,则必须将section
标记作为主要包装器。 Then .b1-segment
will be considered as child within where it's rendering and your css will work.然后
.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>
</>
)
})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.