猫头鹰选择器

最新推荐文章于 2025-06-04 15:15:11 发布

zhuyua

最新推荐文章于 2025-06-04 15:15:11 发布

阅读量407

点赞数 2

文章标签：前端 html javascript

本文链接：https://blog.youkuaiyun.com/zhuyuyaya/article/details/126030511

版权

本文详细介绍了CSS中的猫头鹰选择器，也称为相邻兄弟选择器，用于选择紧接在某一元素后的特定元素。通过`+`符号，我们可以精确地控制页面布局。示例代码展示了如何使用`div+p`选择器来改变紧跟在div元素后面的p标签的样式。此外，还解释了如何与其他选择器结合使用，如`html>bodytable+ul`，来选取特定场景下的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

猫头鹰选择器原名为相邻兄弟选择器，因其造型酷似猫头鹰而有了猫头鹰选择器这种说法。

代码样式：

* + * {}

这里的“ * ” 指代的是任意元素。

语法解释

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（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 元素的子元素。