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

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;
    }
`;