猫头鹰选择器原名为相邻兄弟选择器，因其造型酷似猫头鹰而有了猫头鹰选择器这种说法。
代码样式：
* + * {}这里的“ * ” 指代的是任意元素。
语法解释
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
使用注意点：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猫头鹰选择器</title>
</head>
<style>
div + p {
font-size: 30px;
color: red;
}
</style>
<body>
<div>div</div>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
</body>
</html>
只选择了与div相连的p标签元素给定样式，不相邻则不给样式。
结合其他选择器
相邻兄弟结合符还可以结合其他结合符：
html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
