[分享]css3找相邻元素

CSS3规范中提供了多种方法来选择相邻元素，常用的有相邻兄弟选择符和相邻兄弟组合器。相邻兄弟选择符用于选择某个元素之后紧接着的一个同级元素，选择符为“+”，例： 元素A 元素B 元素C p + p {...

CSS3规范中提供了多种方法来选择相邻元素，常用的有相邻兄弟选择符和相邻兄弟组合器。

相邻兄弟选择符用于选择某个元素之后紧接着的一个同级元素，选择符为“+”，例：

 <p>元素A</p>
    <p>元素B</p>
    <p>元素C</p>

    p + p {
        color: red;
    } 

上述代码将会把元素B的文本颜色设置为红色，因为它是紧接着元素A的同级元素。而元素C则不会被选中。

相邻兄弟组合器用于选择某个元素之后的相邻所有同级元素，组合器为“~”，例：

 <p>元素A</p>
    <p>元素B</p>
    <p>元素C</p>

    p ~ p {
        font-size: 20px;
    } 

上述代码将会把元素B和元素C的字体大小都设置为20像素，因为它们都是紧跟着元素A的同级元素。

以上就是CSS3规范中使用相邻选择器的两种方法，可以实现比较灵活的元素选择效果。