CSS_复合选择器

敲代码中2025-03-05 20:29

目录

[7. 复合选择器](#7. 复合选择器)

[7.1 交集选择器](#7.1 交集选择器)

[7.2 并集选择器](#7.2 并集选择器)

[7.3 后代选择器](#7.3 后代选择器)

[7.4 子代选择器](#7.4 子代选择器)

[7.5 兄弟选择器](#7.5 兄弟选择器)

[7.6 属性选择器](#7.6 属性选择器)

[7.7 伪类选择器](#7.7 伪类选择器)

7.7.1动态伪类

7.7.2结构伪类

7.7.3否定伪类

[7.7.4 UI伪类](#7.7.4 UI伪类)

[7.7.5 目标选择器](#7.7.5 目标选择器)

7. 复合选择器

7.1 交集选择器

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

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

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

举例：

css 复制代码 
p.beauty{
            color: blue;
        }

注意点：

  1. 有标签名，标签名必须卸载前面。

  2. id选择器，理论上可以作为交集的条件，但在实际应用中几乎不用------没有意义。

  3. 交集选择器中不可能 出现两个元素选择器 ，因为一个元素，不能即是p元素又是span元素。

  4. 用的最多的交集选择器：元素选择器配合类名选择器，例如：p.beauty。

html 复制代码 
<!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{}

选择器之间+，

html 复制代码 
<!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 {} （先写祖先，再写后代）

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

css 复制代码 
/* 选中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;
}
html 复制代码 
<!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 ，可以是我们之前学的任何一种选择器。

html 复制代码 
<!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 {} 。

css 复制代码 
div+p{
            color: brown;
        }

通用兄弟选择器：

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

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

实例：

css 复制代码 
div~p{
            color: brown;
        }
html 复制代码 
<!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 属性选择器

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

语法：

  1. 属性名\] 选中**具有**某个属性的元素。

  2. 属性名\^="值"\] 选中包含某个属性，且属性值以指定的值**开头**的元素。

  3. 属性名\*="值"\] 选择包含某个属性，属性值**包含**指定值的元素。

/* 选中具有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动态伪类**

1. `:link` 超链接**未被访问**的状态。

<!-- -->

1. :`visited` 超链接**访问过**的状态。

<!-- -->

1. :`hover` 鼠标**悬停**在元素上的状态。

<!-- -->

1. :`active` 元素**激活**的状态。

<!-- -->

1. :`focus` 获取焦点的元素。

> * `link`和`visited`是a标签独有的属性，`active`和`hover`是使用元素都具有
>
> * 什么是激活？------ 按下鼠标不松开。
>
> * 注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。
>
> * 表单类元素才能使用 :focus 伪类。
>
> * 当用户：点击元素、触摸元素、或通过键盘的 " tab " 键等方式，选择元素时，就是获
>
>   得焦点。

```html
<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结构伪类

常用的：

  1. :first-child 所有兄弟元素中的第一个。
  1. :last-child 所有兄弟元素中的最后一个。
  1. :nth-child(n) 所有兄弟元素中的第 n 个。
  1. :first-of-type 所有同类型 兄弟元素中的第一个。
  1. :last-of-type 所有同类型 兄弟元素中的最后一个。
  1. :nth-of-type(n) 所有同类型 兄弟元素中的 第n个 。

关于 n 的值：

  1. 0 或 不写 ：什么都选不中 ------ 几乎不用。
  1. n ：选中所有子元素 ------ 几乎不用。
  1. 1~正无穷的整数 ：选中对应序号的子元素。
  1. 2n 或 even ：选中序号为偶数的子元素。
  1. 2n+1 或 odd ：选中序号为奇数的子元素。
  1. -n+3 ：选中的是前 3 个。
html 复制代码 
<!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>

了解即可：

  1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
  1. :nth-last-of-type(n) 所有同类型 兄弟元素中的 倒数第**n个** 。
  1. :only-child 选择没有兄弟的元素（独生子女）。
  1. :only-of-type 选择没有同类型兄弟的元素。
  1. :root 根元素。
  1. :empty 内容为空元素（空格也算内容）。
7.7.3否定伪类

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

md-end-block 复制代码 
<!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伪类
  1. :checked 被选中的复选框或单选按钮。
  1. :enable 可用的表单元素（没有 disabled 属性）。
  1. :disabled 不可用的表单元素（有 disabled 属性）。
md-end-block 复制代码 
<!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 选中锚点指向的元素。

md-end-block 复制代码 
<!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>
相关推荐
拖孩20 分钟前
【Nova UI】十五、打造组件库之滚动条组件（上）：滚动条组件的起步与进阶
前端·javascript·css·vue.js·ui组件库
苹果电脑的鑫鑫29 分钟前
element中表格文字剧中可以使用的属性
javascript·vue.js·elementui
Hejjon33 分钟前
Vue2 elementUI 二次封装命令式表单弹框组件
前端·vue.js
一丝晨光1 小时前
数值溢出保护？数值溢出应该是多少？Swift如何让整数计算溢出不抛出异常?类型最大值和最小值？
java·javascript·c++·rust·go·c·swift
小堃学编程1 小时前
前端学习（3）—— CSS实现热搜榜
前端·学习
Wannaer2 小时前
从 Vue3 回望 Vue2：响应式的内核革命
前端·javascript·vue.js
不灭锦鲤2 小时前
xss-labs靶场基础8-10关（记录学习）
前端·学习·xss
Bl_a_ck2 小时前
--openssl-legacy-provider is not allowed in NODE_OPTIONS 报错的处理方式
开发语言·前端·web安全·网络安全·前端框架·ssl
懒羊羊我小弟2 小时前
手写符合Promise/A+规范的Promise类
前端·javascript
互联网搬砖老肖2 小时前
Web 架构之负载均衡会话保持
前端·架构·负载均衡
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06Coze扣子平台完整体验和实践（附国内和国际版对比）07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09DeepSeek各版本说明与优缺点分析10VMware虚拟机安装Win7专业版保姆级教程（附镜像包）