[分享]css兄弟元素前面的元素

在CSS样式表中，我们可以使用兄弟选择器（~）来选择某一个元素后面的兄弟元素，但如果我们想选择前面的兄弟元素该怎么办呢？这个时候，CSS的兄弟选择器无法满足我们的需要，但是有一个非常实用的伪类选择器—...

在CSS样式表中，我们可以使用兄弟选择器（~）来选择某一个元素后面的兄弟元素，但如果我们想选择前面的兄弟元素该怎么办呢？这个时候，CSS的兄弟选择器无法满足我们的需要，但是有一个非常实用的伪类选择器——

:nth-child

。

该伪类选择器可以选择某一个元素前面的兄弟元素。下面来看一个例子：

 /*选择id为name的元素前面的所有div元素*/
    div:nth-child(-n+3) ~ #name {
        color: red;
    } 

在上面的例子中，选择器选中了id为name的元素前面的所有div元素，并且将这些元素的文本颜色设置为红色。其中，

-n+3

表示选择器选中的范围是前三个兄弟元素。

可以看出，

:nth-child

伪类选择器是一个非常实用的选择器，尤其是在选择某一个元素前面的兄弟元素时，可以让我们更方便地进行样式的设置。