我怎么能不选择样式组件的最后一个元素

Question

这是我的代码结构

const StyledArticle = styled.article``;

const StyledDiv = styled.div``; 

 <StyledArticle>
   <StyledDiv>1</StyledDiv>
   <StyledDiv>2</StyledDiv>  
   <StyledDiv>3</StyledDiv> 
   <StyledDiv>4</StyledDiv>  
 </StyledArticle> 

除了第 4 个 StyledDiv，我如何添加 css StyledDiv 1,2,3。

无需在 StyledArticle 中添加任何 css 语句

没有 js，jquery 只使用 css。

Answer 1

您可以使用:not()和:last-of-type伪选择器的组合：

StyledDiv:not(:last-of-type) {
  color: blue;
}

<StyledArticle>
  <StyledDiv>1</StyledDiv>
  <StyledDiv>2</StyledDiv>
  <StyledDiv>3</StyledDiv>
  <StyledDiv>4</StyledDiv>
</StyledArticle>

样式化组件：

const StyledDiv = styled.div`
    &:not(:last-of-type) {
      color: red;
    }
`;