CSS选择器--猫头鹰选择器
2017-07-13 本文已影响92人
辣瓜瓜
猫头鹰选择器，因为+这种方式酷似猫头鹰，被称为猫头鹰选择器。
* + * { 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>
效果
以前总不爱用也记不住相邻兄弟选择器，直到我看到一篇分享，总结然后自己写了写，这次我感觉我不会忘了~
