css_day02_各种选择器基本使用（相邻兄弟选择器+，兄弟选择器~）

最新推荐文章于 2024-05-28 11:31:46 发布

Yellow_J的小屋子

最新推荐文章于 2024-05-28 11:31:46 发布

阅读量1.5k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/YJ_meditation/article/details/75453154

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.交集选择器

格式：
选择器1选择器2{

    }

效果：这里写图片描述

2.并集选择器
这里写图片描述

.
.
.
.
.
.
.
.
.
.

<———————————-华丽的分割线——————————->
今天是17年08月05日，因为之前的学习不是和扎实，导致现在工作遇到比较基础的东西都花费了比较大的时间和精力。今天就来理解一下兄弟选择器和类选择器。
先直接看看官网：
3_1.相邻兄弟选择器：
(1)写法：h1+p{border:1px solid red;}
(2)读法：h1和p有一个共同的父级元素，选择紧接着h1相邻的p元素；
(3)注意点：两个要有一个共同的父级元素，相邻且下一个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01相邻兄弟选择器</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border:1px solid #000;
            margin:100px auto;
            text-align: center;
        }
        h1+p{
            color:red;
        }
        /*只选中紧接着h1标签相邻的p标签，并且h1标签和p标签拥有一个共同的父级div*/
    </style>
</head>
<body>
<div>
    <h1>h1标签</h1>
    <p>第一个p标签</p>
    <p>第二个p标签</p>
    <p>第三个p标签</p>
    <p>第四个p标签</p>
</div>
</body>
</html>

3_2.变形的相邻兄弟选择器：
(1)写法：ul+ul{border:red;}
(2)读法：两个ul有相同的父级，选中紧接着ul相邻的ul
(3)注意点：这个的注意点和h1+p的注意点一样，但是还多了一个比较有趣的东西就是ul+ul，它有点像一个接着一个地循环遍历，知道最后一个。
这个有点混，直接来个demo就容易理解了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0805_02相邻的兄弟选择器变形ul+ul</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #000;
            text-align: center;
        }
        ul+ul{
            list-style:none;
            color: red;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>第一个ul中的li</li>
        <li>第一个ul中的li</li>
        <li>第一个ul中的li</li>
    </ul>
    <ul>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
    </ul>
    <ul>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
    </ul>
    <ul>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
    </ul>
</div>
</body>
</html>

其实相邻兄弟选择器比较好用，要记住相邻兄弟选择器是选中什么什么标签下的某一标签（变形除外）所以，什么什么标签是选不中的，也就是你所写的+号的前一个标签是选不中的。

4.兄弟选择器：
(1)写法：div~p
(2)作用：查找某一个指定元素的后面的所有兄弟结点。
(3)注意点：选中div下的所有p，无论相不相邻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0805_兄弟选择器</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            text-align: center;
            margin: 200px auto;
        }
        span~p{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p>p标签</p>
    <span>span标签</span>
    <p>p标签</p>
    <span>span标签</span>
    <span>span标签</span>
    <p>p标签</p>
</div>
</body>
</html>

比较喜欢的文章相邻兄弟选择器+，兄弟选择器~

这个只是本人的学习笔记，有什么不对或者不好的地方希望可以得到大家指正哦～

Yellow_J的小屋子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css_day02_各种选择器基本使用（相邻兄弟选择器+，兄弟选择器~）

1.交集选择器格式：选择器1选择器2{ } 效果：2.并集选择器 . . . . . . . . . .<———————————-华丽的分割线——————————-> 今天是17年08月05日，因为之前的学习不是和扎实，导致现在工作遇到比较基础的东西都花费了比较大的时间和精力。今天就来理解一下兄弟选择器和类选择器。先直接看看官网： 3_1.相邻兄弟选择器：
复制链接

扫一扫