CSS组合选择器学习记录（一）-CSDN博客

本文链接：https://blog.csdn.net/www586089/article/details/139883851

一、CSS 组合选择符

CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式:

后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以波浪号分隔）

二、后代选取器

后代选取器匹配所有指定元素的后代元素。以下实例选取所有 <p> 元素插入到 <div> 元素中:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>组合选择器学习（一）</title>
    <style>
        div p {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <div>
        <p>段落 1。 在 div 中。</p>
        <p>段落 2。 在 div 中。</p>
    </div>

    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>

</body>

</html>

运行效果如下:

三、子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> ：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>组合选择器学习（一）</title>
    <style>
        div > p {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <h1>欢迎来到我的主页</h1>
    <div>
        <h2>我叫唐纳德</h2>
        <p>我住在达克堡。</p>
    </div>

    <div>
        <span>
            <p>我不是被设计的。</p>
        </span>
    </div>

    <p>我最好的朋友是米奇。</p>
</body>

</html>

运行效果如下：

四、相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>组合选择器学习（一）</title>
    <style>
        div+p {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <h1>欢迎来到我的主页</h1>

    <div>
        <h2>我叫唐纳德</h2>
        <p>我住在达克堡。</p>
    </div>

    <p>我最好的朋友是米奇。</p>

    <p>我不是被设计的。</p>

</body>

</html>

运行效果如下：

五、普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>组合选择器学习（一）</title>
    <style>
        div~p {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <div>
        <p>段落 1。 在 div 中。</p>
        <p>段落 2。 在 div 中。</p>
    </div>

    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>

</body>

</html>

运行效果如下：