当前位置：首页 > article >正文

CSS_复合选择器

article 2025/3/7 4:19:06

7. 复合选择器

7.1 交集选择器

7.2 并集选择器

7.3 后代选择器

7.4 子代选择器

7.5 兄弟选择器

7.6 属性选择器

7.7 伪类选择器

7.7.1动态伪类

7.7.2结构伪类

7.7.3否定伪类

7.7.4 UI伪类

7.7.5 目标选择器

7. 复合选择器

7.1 交集选择器

作用：选中同时符合多个条件的元素。

交集有并且的含义（通俗理解：即……又……的意思，例如：年轻且美丽）

语法：选择器1选择器2选择器3…选择器n{}

举例：

p.beauty{
            color: blue;
        }

注意点：

有标签名，标签名必须卸载前面。
id选择器，理论上可以作为交集的条件，但在实际应用中几乎不用——没有意义。
交集选择器中不可能出现两个元素选择器，因为一个元素，不能即是p元素又是span元素。
用的最多的交集选择器：元素选择器配合类名选择器，例如：p.beauty。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <style>
        .beijing {
            color: gold;
        }
        .beauty {
            color: red;
        }
        p.beauty{
            color: blue;
        }
        /* p.beauty#ls{
            color: aqua;
        } 
        一般不用这种形式id可以直接定位*/
        /* #ls{
            color: aquamarine;
        } */
    </style>
</head>
<body>
    <h2 class="beijing">北京大学</h2>
    <h2 class="qinghua">清华大学</h2>
    <hr>
    <p class="beauty" id="ls">李四</p>
    <p class="beauty">张三</p>
</body>
</html>

7.2 并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器

语法：选择器1，选择器2，选择器3…选择器n{}

选择器之间+，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        .beijing {
            color: gold;
           
        }
        .beauty {
            color: red;
        }
        .beauty,.beijing{
            font-size: 50px;
            background: gray;
            width: 200px;
        }
    </style>
</head>
<body>
    <h2 class="beijing">北京大学</h2>
    <h2 class="qinghua">清华大学</h2>
    <hr>
    <p class="beauty" id="ls">李四</p>
    <p class="beauty">张三</p>
</body>
</html>

7.3 后代选择器

作用：选中指定元素中，复合要求的后代元素。

语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代）

选择器之间，用空格隔开。

/* 选中ul中的所有li */
ul li {
color: red;
}
/* 选中ul中所有li中的a */
ul li a {
color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: blue;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        ul li{
            color: blue;
        }
        ol li{
            color: aquamarine;
        }
        ul li a{
            color: brown;
        }
        .suject li{
            color: seagreen;
        }
        
    </style>
</head>
<body>
    <!-- 无序 -->
    <ul>
        <li>美甲</li>
        <li>电视剧</li>
        <li>
            <a href="#">剪头</a>
        </li>
        <div>
            <li>打篮球</li>
        </div>
    </ul>
    <!-- 有序 -->
    <hr>
    <ol>
        <li>小李</li>
        <li>小王</li>
        <li>小刘</li>
    </ol>
    <ol class="suject">
        <li>数据结构</li>
        <li>大物</li>
        <li>高数</li>
    </ol>
</body>
</html>

7.4 子代选择器

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

选择器之间，用 > 隔开， > 可以理解为：" xxx 的子代"，其实就是儿子的意思。

选择器 1234....n ，可以是我们之前学的任何一种选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器</title>
    <style>
        div>a{
            color: aquamarine;
        }
        div>p>a{
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">李四</a>
        <a href="#">王五</a>
        <p>
            <a href="#">张三</a>
        </p>
    </div>
</body>
</html>

注意：

1. 子代选择器，最终选择的是子代，不是父级。

2. 子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

7.5 兄弟选择器

相邻兄弟选择器：

作用：选中指定元素后，符合条件的相邻兄弟元素。

所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。

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

div+p{
            color: brown;
        }

通用兄弟选择器：

作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）

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

实例：

div~p{
            color: brown;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兄弟选择器</title>
    <style>
        /* 与div紧紧相邻的兄弟p元素（在div下面） */
        div+p{
            color: brown;
        }
         /* 与div后所有的兄弟p元素（在div下面） */
        div~p{
            color: brown;
        }
    </style>
</head>
<body>
    <p>广州</p>
    <div>大学</div>
    <p>上海</p>
    <p>北京</p>
</body>
</html>

注意：两种兄弟选择器，选择的是下面的兄弟。

7.6 属性选择器

作用：选中属性值符合一定要求的元素。

语法：

[属性名] 选中具有某个属性的元素。
[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}
/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}
/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

7.7 伪类选择器

作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。

如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态

7.7.1动态伪类

:link 超链接未被访问的状态。

:visited 超链接访问过的状态。

:hover 鼠标悬停在元素上的状态。

:active 元素激活的状态。

:focus 获取焦点的元素。

link和visited是a标签独有的属性，active和hover是使用元素都具有

什么是激活？—— 按下鼠标不松开。

注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

表单类元素才能使用 :focus 伪类。

当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获

得焦点。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态</title>
    <style>
        /* 选中的是没有访问过的a元素 */
        a:link{
            color: orange;
        }
        /* 选中的是访问过的a元素 */
        a:visited{
            color: gray;
        }
        /* 选中的是鼠标悬浮状态的a元素 */
        a:hover{
            color: skyblue;
        }
        /* 选中的是鼠标点击激活状态的a元素 */
        a:active{
            color: greenyellow;
        }
        /*  */
        input:focus {
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">baidu</a>
    <a href="https://www.jingdong.com">jingdong</a>
    <br>
    <input type="text" name="" id="">
</body>

7.7.2结构伪类

常用的：

:first-child 所有兄弟元素中的第一个。

:last-child 所有兄弟元素中的最后一个。

:nth-child(n) 所有兄弟元素中的第 n 个。

:first-of-type 所有同类型兄弟元素中的第一个。

:last-of-type 所有同类型兄弟元素中的最后一个。

:nth-of-type(n) 所有同类型兄弟元素中的 第n个 。

关于 n 的值：

0 或不写：什么都选不中 —— 几乎不用。

n ：选中所有子元素 —— 几乎不用。

1~正无穷的整数：选中对应序号的子元素。

2n 或 even ：选中序号为偶数的子元素。

2n+1 或 odd ：选中序号为奇数的子元素。

-n+3 ：选中的是前 3 个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类</title>
    <style>
        /* 选中div的第一个儿子p元素 结构1*/
        /* div>p:first-child{
            color: #de3939;
        } */
        /* 选中div的第一个儿子p元素 结构2*/
        div>p:first-child {
            color: #341dc9;
        }

        /* 选中div的后代p元素，且p的父级是谁无所谓
        ，但p必须是其父亲的第一个儿子 结构3*/
        div p:first-child {
            color: #0dc62f;
        }

         /* 选中div的后代p元素，且p的父级是谁无所谓
        ，但p必须是其父亲的第一个儿子 结构3*/
        p:first-child {
            color: #0dc62f;
        }
         /* 选中div的第n个儿子p元素（按照所以儿子计算） */
        div>p:nth-child(3) {
            color: brown;
        }
        div>p:nth-child(2n+1) {
            color: rgb(65, 42, 165);
        }
        /* 所有同类型兄弟元素中的第一个 */
        div>p:first-of-type{
            color: rgb(5, 96, 66);
        }
         /* 所有同类型兄弟元素中的最后一个 */
        div>p:last-of-type{
            color: rgb(5, 96, 66);
        }
        /* 所有同类型兄弟元素中的 第n个（按照所有同类型兄弟计算） */
        div>p:nth-of-type(3){
            color: blue;
        }
    </style>
</head>

<body>
    <!-- 结构1 -->
    <!-- <div>
        <p>张三：100</p>
        <p>李四：99</p>
        <p>王五：98</p>
        <p>刘：97</p>
    </div> -->

    <!-- 结构2 -->
    <!-- <div>
        <span>张三：100</span>
        <p>李四：99</p>
        <p>王五：98</p>
        <p>刘：97</p>
    </div> -->
    <!-- 结构3 -->
     <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三：100</p>
        </marquee>
        <p>李四：99</p>
        <p>王五：98</p>
        <p>刘：97</p>
    </div>
</body>
</html>

了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。

:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第**n个** 。

:only-child 选择没有兄弟的元素（独生子女）。

:only-of-type 选择没有同类型兄弟的元素。

:root 根元素。

:empty 内容为空元素（空格也算内容）。

7.7.3否定伪类

:not(选择器) 排除满足括号中条件的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>否定伪类</title>
    <style>
        /* 选中的是div的儿子p元素，排除类名为fail的元素 */
        div>p:not(.fail){
            color: red;
        }
        /* 选中的是div的儿子p元素，排除title属性为加油的元素 */
        div>p:not([title^="加油"]){
            color: blue;
        }
        /* 选中的是div的儿子p元素，排除第一个儿子p元素*/
        div>p:not(:first-child){
            color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p>张三：100</p>
        <p>李四：99</p>
        <p>王五：98</p>
        <p>刘：97</p>
        <p class="fail" title="加油">孙七：59</p>
        <p class="fail">李八：40</p>
    </div>
</body>
</html>

7.7.4 UI伪类

:checked 被选中的复选框或单选按钮。

:enable 可用的表单元素（没有 disabled 属性）。

:disabled 不可用的表单元素（有 disabled 属性）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI伪类</title>
    <style>
        /* 选中的是勾选的复选框  
        :checked 被选中的复选框或单选按钮。*/
        input:checked{
            width: 100px;
            height: 100px;
        }
        /* 选中的是被禁用的input元素 */
        input:disabled{
            background-color: aquamarine;
        }
        /* 选中的是可用的input元素 */
        input:enabled{
            background-color: black;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="radio" name="gender" id="">
    <input type="radio" name="gender" id="">
    <input type="text">
    <input type="text" disabled>
</body>
</html>

7.7.5 目标选择器

:target 选中锚点指向的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI伪类</title>
    <style>
       div{
        background-color: bisque;
        height: 400px;
       }
        div:target{
        background-color: black;
       }
    </style>
</head>
<body>
    <a href="#one">第1个</a>
    <a href="#two">第2个</a>
    <a href="#three">第3个</a>
    <a href="#four">第4个</a>
    <a href="#five">第5个</a>


    <div id="one">1</div><br>
    <div id="two">2</div><br>
    <div id="three">3</div><br>
    <div id="four">4</div><br>
    <div id="five">5</div><br>
</html>