CSS选择器--猫头鹰选择器

猫头鹰选择器，因为+这种方式酷似猫头鹰，被称为猫头鹰选择器。

* + * {   margin-top: 5px; }

上面定义了一个简单的猫头鹰选择器

+：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

*：通配符,代表任意元素。

demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
        <style>
            .a {background: pink;}
            .warp div + div {margin-top: 20px;}
        </style>
    </head>
    <body>
        <div class="warp">
            <div class="a">div</div>
            <div class="a">div</div>
            <div class="a">div</div>
            <div class="a">div</div>
        </div>
    </body>
</html>

效果

以前总不爱用也记不住相邻兄弟选择器，直到我看到一篇分享，总结然后自己写了写，这次我感觉我不会忘了~

最后编辑于：2017.12.08 20:20:42

CSS选择器--猫头鹰选择器

demo：

推荐阅读更多精彩内容