CSS选择器详解：组合、子选择器、相邻与兄弟选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/wzfi20042002/article/details/113481190

CSS选择器（二）

2.组合选择器

当把两个或多个基本选择器组合在一起，就形成了一个复杂的选择器，通过组合选择器可以精确匹配页面元素。

2.1 包含选择器

包含选择器通过空格标识符来表示，前面一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        #head p{font-size: 15px;color:blue;}
        #main P{font-size:25px;}
    </style>
</head>
<body>
    <div>
        <div id="head">
            <p>我是头部第一段</p>
            <p>我是头部第二段</p>
        </div>
        <div id="main">
            <p>我是主体第一段</p>
            <p>我是主体第二段</p>
        </div>
    </div>
   
</body>
</html>

在这里插入图片描述

2.2 子选择器

子选择器是指定父元素所包含的子元素。子元素使用尖角号（>）表示。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        span{  /*span元素的默认样式*/
            font-size: 20px;
        }
        div > span{  /*div元素包含的span子元素的默认样式*/
            font-size: 15px;color: pink;
        }
    </style>
</head>
<body>
    <h2>
        <span>我是标题</span>
    </h2>
    <div id="box">
        <span class="apple">今天是个好日子。</span>
    </div>
</body>
</html>

在这里插入图片描述

通过这种方式可以准确定义HTML文档某个或一组元素的样式，而不需要为它们定义ID属性或者class属性。

2.3 相邻选择器

相邻选择器通过加号（+）分隔符进行定义。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        p+h2{color: blue;font-size: 20px;}
    </style>
</head>
<body>
    <h3>情况一</h3>   /*有效*/
    <p>今天天气真不错。</p>
    <h2>今天太阳真好。</h2>
    <h3>情况二</h3>   /*无效*/
    <h2>今天太阳真好。</h2>
    <p>今天天气真不错。</p>
</body>
</html>

在这里插入图片描述

相邻选择器编写css样式：第1个元素为兄、第2个为弟，位置关系不能调换，否则样式无效；不论有多少父层，只要它们是直接的兄弟关系，则样式有效，这一点与子选择器是有区别的。

2.4 兄弟选择器

兄弟选择器通过波浪符号（~）分隔符进行定义。前后选择符的关系是兄弟关系，即在HTML结构中两个标签前为兄后为弟，否则样式无法应用。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        p~h2{color: blue;font-size: 20px;}
    </style>
</head>
<body>
    <h3>情况一</h3>
    <p>今天天气真不错。</p>
    <h2>今天太阳真好。</h2>
    <h3>情况二</h3>
    <h2>今天太阳真好。</h2>
    <p>今天天气真不错。</p>
    <h2>今天是个好日子。</h2>
    <h2>苹果是水果。</h2>
</body>
</html>

兄弟选择器能够选择前置元素同级的所有匹配元素，而相邻选择器只能选择前置元素后相邻的一个匹配元素。

在这里插入图片描述

由图可知所有位于p标签后面的h2标签都被选中。

3.5 分组选择器

分组选择器通过逗号（，）分隔符进行定义。

通过分组选择器可以实现集体声明，将样式表中一致的css样式放在一起，然后通过逗号链接这些选择器，减少代码的书写量。
在这里插入图片描述
通过分组选择器集中声明上面学过的复合选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        h1,h2,h3,h5{background-color: rgb(16, 130, 230);   /*设置背景色*/
                       margin: 0;                               /*清除标题的默认外边距*/
                       margin-bottom: 20px;                     /*使用下边距拉开各个标题之间的距离*/
                       }
        h1+h2,h2+h3,h3+h4{color: pink;}
        body>h5,h1>span{font-size: 20px;}
        h2 span,h3 span{padding: 0 40px;}   /*span标签左右间距*/
    </style>
</head>
<body>
    <h1>我是h1<span>我是span</span></h1>
    <h2>我是h2<span>我是span</span></h2>
    <h3>我是h3<span>我是span</span></h3>
    <h4>我是h4<span>我是span</span></h4>
    <h5>我是h5<span>我是span</span></h5>
</body>
</html>