【第三篇】CSS选择器之组合选择器

最新推荐文章于 2024-04-28 06:46:32 发布

爱学习_程序员

最新推荐文章于 2024-04-28 06:46:32 发布

阅读量2.1k

点赞数 4

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/baidu_38766791/article/details/125815212

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

组合选择器

页面元素比较复杂，存在多个嵌套。为了更加灵活选择页面中的元素，CSS中还提供了组合选择器。组合选择器就是将多个基本选择器通过一定的规则连接起来组成一个复杂选择器。

举例:

该例子中如果想将paragraph容器下的div中的文本颜色改为红色，其他的文本颜色保持不变。如果只使用基础选择器来实现，只能通过id选择器来实现。在页面中id选择器只有在具有唯一性的情况下才会使用，而且页面中id选择器多了之后，不利于css样式的灵活选择。因此才诞生了组合选择器以满足这种需求。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    我是container容器下的文本。
    <div class="paragraph">
        我是container容器下，第一个paragraph容器中的文本。
    </div>
    <div class="paragraph">
        我是container容器下，第二个paragraph容器中的文本。
        <div>
            我是container容器下，第二个paragraph容器下div中的文本。
        </div>
    </div>
</div>
</body>
</html>

后代选择器

语法：选择器1 选择器2{...}

说明：选择器1和选择器2之间存在空格。这种写法表示选择器1容器下面的所有满足选择器2要求的页面元素。

举例：通过.paragraph div这个后代选择器可以选中。paragraph下所有的div标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .paragraph div{
            color: red;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    我是container容器下的文本。
    <div class="paragraph">
        我是container容器下，第一个paragraph容器中的文本。
    </div>
    <div class="paragraph">
        我是container容器下，第二个paragraph容器中的文本。
        <div>
            我是container容器下，第二个paragraph容器下div中的文本。
            <div class="test">
                我是container容器下，第二个paragraph容器下div容器下test容器下的文本。
            </div>
        </div>
        <p>
            我是contianer容器下，p容器中的文本。
            <div>
                我是container容器下，p容器下div容器中的文本。
            </div>
        </p>
    </div>
</div>
</body>
</html>

效果：

子代选择器

语法：选择器1 > 选择器2{...}

说明：选择器1和选择器2之间通过＞号连接，表示选择选择器1下直接包含的选择器2，而不包含间接包含的选择器2. 如下图子代选择器只会选择第一个选择器2，而不会选择第二个选择器2.

举例：

container容器下存在两个strong元素，只会选择其下直接包含的strong元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .container > strong{
            color: red;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    我是container容器下的文本。
    <strong>container容器下的加强</strong>
    <div>
        <strong>div容器下的加强</strong>
    </div>
</div>
</body>
</html>

效果：

相邻兄弟选择器

语法：选择器1 + 选择器2{...}

说明：选择器1和选择器2之间通过+号连接，表示与选择器1同级的下一个相邻的选择器2.

举例：selected类存在4个同级的li标签，只选择其下一个li标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .selected + li{
            color: red;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <ul>
        <li>第一项</li>
        <li class="selected">第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        <li>第五项</li>
    </ul>
</div>
</body>
</html>

效果：

兄弟选择器

语法：选择器1 ~ 选择器2{...}

说明：选择器1和选择器2之间通过~符号连接。表示选中与选择器1同级的且在选择器1后面的所有的选择器2.

举例：

selected类前后都存在同级的li标签，兄弟选择器只会选择在其后方的同级的li标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .selected ~ li{
            color: red;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <ul>
        <li>第一项</li>
        <li class="selected">第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        <li>第五项</li>
    </ul>
</div>
</body>
</html>

效果：

复合选择器

语法：选择器1选择器2{...}

说明：选择器1和选择器2之间没有任何符号连接，表示选择同时满足选择器1和选择器2的元素。这种选择器一般用在类选择器与基础选择器的复合中。

举例：只有同时满足两个选择器要求的元素才会被选中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .selected{
            color: red;
        }
        .bigger{
            font-size: large;
        }
        .selected.bigger{
            color: green;
            font-size: larger;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <ul>
        <li>第一项</li>
        <li class="selected">第二项</li>
        <li class="bigger">第三项</li>
        <li class="bigger selected">第四项</li>
        <li>第五项</li>
    </ul>
</div>
</body>
</html>

效果：