CSS相邻兄弟选择器和通用选择器

倒霉男孩

于 2025-04-17 20:54:56 发布

阅读量163

点赞数 10

分类专栏： html+css学习笔记文章标签： css javascript css3

本文链接：https://blog.csdn.net/2401_86523075/article/details/147312783

版权

html+css学习笔记专栏收录该内容

42 篇文章

订阅专栏

相邻兄弟选择器

相邻兄弟选择器（Adjacent Sibling Selector）用于选择紧接在某个元素后的同级元素，语法使用加号 + 连接两个选择器。它的核心特点是：仅选择第一个符合条件的相邻元素。

在极端复杂 DOM 中，过度使用选择器可能影响渲染性能，但现代浏览器已优化良好。理解相邻兄弟选择器的特性后，可以更精准地控制页面元素的样式逻辑。

1.选择紧接在<h1>元素后的第一个<p>元素

h1 + p {
            color: gold;
        }

2.选择紧接在<ul>元素后的第一个<div>元素

ul + div{
            list-style-type: square;
        }

3.选择紧接在具有特定类元素后的第一个<a>元素

.class + a {
            text-decoration: none;
        }

以下是使用相邻兄弟选择器的示例，展示如何应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 + p {
            color: gold;
        }
        ul + div{
            list-style-type: square;
        }
        .class + a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>this is a heading</h1>
    <p>this is not affected</p>
    <p>this is affected</p>
    <ul>
        <li>List item1</li>
        <li>List item2</li>
    </ul>
    <div>affected</div>
    <a href="#">link 1</a>
    <a href="#">link 2</a>
</body>
</html>

通用选择器

通配符选择器 * 用于匹配文档中的所有元素，优先级最低，常用于全局样式重置或快速测试。
通用选择器语法

* {
  /* 样式规则 */
}

使用通用选择器示例

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

以下是一个完整示例，将通用选择器应用于html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div>
        <h1>this is a heading</h1>
        <p>this is 段落</p>
   
    <ul>
        <li>List item1</li>
        <li>List item2</li>
    </ul>
    </div>
</body>
</html>