兄弟选择器

最新推荐文章于 2024-08-09 11:41:07 发布

杨宗健

最新推荐文章于 2024-08-09 11:41:07 发布

阅读量567

点赞数

分类专栏： CSS新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/68927341

版权

CSS新手学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

相邻兄弟选择器：

格式：
标签1+标签2{

属性:值;

}

相邻兄弟选择器只能选择相邻的兄弟级别的标签。如：标签1+标签2的意思是：标签2是标签1的相邻的紧挨着的，是在标签1下面的，而且是标签1兄弟级别的标签。

相邻兄弟选择器只会选择相邻的兄弟，不会选择其他的兄弟标签。

例子：

把相邻着<h1>标签的所有的<p>标签中的内容都修改成红色。

例一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>兄弟选择器</title>
        <base target="_self">
        <style type="text/css">
            h1+p{
                color: red;
            }
        </style>
    </head>
<body>
<h1>我是段落</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是段落</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

例二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>兄弟选择器</title>
        <base target="_self">
        <style type="text/css">
            h1+p{
                color: red;
            }
        </style>
    </head>
<body>
<h1>我是段落</h1>
<a href="#">超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是段落</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

对比上面两幅图片，理解相邻兄弟选择器。

通用兄弟选择器：

格式：

标签1~标签2{

属性;值:

}

1.标签1下面的，所有的名字叫做标签2的兄弟级别的标签都会被改变和修饰。
2.标签1下面的，id名或class类名或标签名叫做标签2的标签会被修饰。

3.通用兄弟选择器不单单只改变相邻的兄弟标签，只要是下面的（相对而言），而且满足条件的，都会被查找到，然后进行修饰。

例子：

使类名为xxx的标签中的内容变成红色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>兄弟选择器</title>
        <base target="_self">
        <style type="text/css">
            h1~.xxx{
                color: red;
            }
        </style>
    </head>
<body>
<h1>我是段落</h1>
<p>我是段落</p>
<p class="xxx">我是段落</p>
<p>我是段落</p>
<h1>我是段落</h1>
<p>我是段落</p>
<p>我是段落</p>
<p class="xxx">我是段落</p>
</body>
</html>