我正在尝试通过nth- child(2)将ColorBox元素作为的子元素来更改元素的背景颜色,ImgGrid但我似乎无法使其正常工作,我尝试了使用不同元素的多种变体,但似乎没有任何效果
nth- child(2)
ColorBox
ImgGrid
如果我不尝试定位nth-child元素,这将更改背景颜色
nth-child
const ImgGrid = styled.div` display: flex; flex-wrap: wrap; flex-direction: row; ${ColorBox} { background: #ff00ff; } `
我怎样才能针对nth-child(2)中的 ColorBox元素?
nth-child(2)
import React from 'react' import styled from 'styled-components' // import Img from '../../atoms/Img' import { array, bool } from 'prop-types' const Wrap = styled.div` padding: 20px 0; ` const BoxWrap = styled.div` position: relative; border: 1px solid #000; height: auto; padding: 20px; ` const Title = styled.div` position: absolute; display: flex; align-items: center; top: -20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 40px; background: #f6f6f6; padding: 10px; ` const BoxInner = styled.div` width: 100%; height: 100%; ` const ColorBox = styled.div` height: 60px; width: 100%; background: #FFD700; ` const ImgCell = styled.div` flex: 0 0 25%; padding: 5px; ` const ImgGrid = styled.div` display: flex; flex-wrap: wrap; flex-direction: row; &:nth-child(2) ${ColorBox} { background: #ff00ff; } ` const ImgCellInner = styled.div` position: relative; ` // const ImgText = styled.div` // position: absolute; // bottom: 0; // left: 0; // padding: 5px; // width: 100%; // background: rgba(0,0,0,0.7); // color: #fff; // ` const ImgWrap = styled.div` width: 100%; ` const ColorWrap = styled.div` ` const Filter = ({ filterData, color }) => ( <Wrap> <BoxWrap> <Title> For Women </Title> <BoxInner> <ImgGrid> {filterData.map(filter => <ImgCell> <ImgCellInner> <ImgWrap> {color && <ColorWrap> <ColorBox /> {filter.text} </ColorWrap> } </ImgWrap> </ImgCellInner> </ImgCell>, )} </ImgGrid> </BoxInner> </BoxWrap> </Wrap> ) /* eslint-disable*/ Filter.propTypes = { filterData: array, color: bool, } Filter.defaultProps = { filterData: array, color: bool, } export default Filter
我可以假设您的代码无法正常工作,因为&:nth-child(2)意味着您选择的是ImgGrid,它本身就是第二个孩子。尝试将ImgCell指定为nth- child(2):
const ImgGrid = styled.div` display: flex; flex-wrap: wrap; flex-direction: row; ${ImgCell}:nth-child(2) ${ColorBox} { background: #ff00ff; } `
我不确定范围,所以可能您需要在使用&之前:
&
const ImgGrid = styled.div` display: flex; flex-wrap: wrap; flex-direction: row; & ${ImgCell}:nth-child(2) ${ColorBox} { background: #ff00ff; } `