如何才能不选择样式组件的最后一个元素

Question

这是我的代码结构

const StyledArticle = styled.article``;
const StyledDiv = styled.div``; 
<StyledArticle>
<StyledDiv>1</StyledDiv>
<StyledDiv>2</StyledDiv>  
<StyledDiv>3</StyledDiv> 
<StyledDiv>4</StyledDiv>  
</StyledArticle> 

如何添加css StyledDiv 1,2,3，除了4th StyledDiv。

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

Answer 2

使用CSS:not(：last child(选择器。它的作用正是它的意思。它选择的元素不是父元素的最后一个子元素。

<style> 
StyledArticle StyledDiv:not(:last-child) {
background: red;
}
</style>