CSS-選擇器6-兄弟選擇器

java小工匠發表於2017-06-11
CSS

CSS選擇器-系列文章

1、兄弟選擇器

選擇器 例子 例子描述 CSS
element+element div+p 選擇緊接在 div 元素之後的所有 p 元素。 2
element1~element2 div~p 選擇在div元素之後的所有p元素。 3

2、效果演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS相鄰兄弟選擇器</title>
    <style type="text/css">
        .div2+p{
            color: red;
        }
    </style>
</head>
<body>
    <p class="p">p1</div>
    <div class="div1">div1</div>
    <p class="p">p2</div>
    <div class="div2">div2</div>
    <p class="p">p3</div>
    <div class="div3">div3</div>
    <p class="p">p4</div>
    <div class="div4">div4</div>
    <p class="p">p5</div>
    <div class="div5">div5</div>
</body>
</html>

執行效果：

image.png

如果使用 ** div~p** 執行效果：

image.png

CSS選擇器-系列文章
下一節 CSS選擇器7-屬性選擇器


相關文章