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

htmlCSS-----CSS选择器（下）

news 2025/12/19 11:33:38

目录

前言：

2.高级选择器

 （1）子代选择器

（2）伪类选择器

（3）后代选择器

（4）兄弟选择器

相邻兄弟选择器

 通用兄弟选择器

（5）并集选择器

（6）交集选择器

前言：

        上一期讲了CSS选择器中的初级选择器，那么这一期我们就接着学习CSS中的高级选择器，下面就一起来看看吧！（上一期链接：html&CSS-----CSS选择器（上）_灰勒塔德的博客-CSDN博客）

2.高级选择器

 （1）子代选择器

  • 结构：选择器1 > 选择器2 {css属性名:属性值;}

  • 在选择器1所找到标签的子代（子代只包括：儿子）中，找到满足选择器2的标签，设置样式

 写法：

div > a {color: red;
}

示例：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><a href="https://www.yhdmz2.com/" target="_blank" id="cartoon">点开我开始看动漫<div><p>こんにちは</p></div><p>你好！</p></a>
</body>
</html>

CSS代码：

#cartoon{text-decoration: none;font-size: 30px;
}
#cartoon>div>p{color: red;pointer-events:none}

效果：

 这里可以看出，子类选择器是作用到div里面的p标签，所以字体会显示红色，而外面的p标签还是保持原来的样子。

（2）伪类选择器

样式：:nth-of-type(表达式)  

这一类选择器可以用于筛选的作用，下面看个示例：

 html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><a href="https://www.yhdmz2.com/" target="_blank" id="cartoon">点开我开始看动漫<ul><li>first</li><li>second</li><li>third</li><li>forth</li><li>fifth</li></ul>
</body>
</html>

CSS代码：

#cartoon{text-decoration: none;font-size: 30px;color: blueviolet;
}
#cartoon>ul>li:nth-of-type(2n+1){color: chocolate;
}

效果：

 这里可以看出如果我的表达式填入的是2n+1是表示奇数的意思，也就意味着1,3,5是变为巧克力色的，而2和4是保持原理的颜色，如果我填入的是2n的话那就是偶数的被作用。

（3）后代选择器

  • 结构：选择器1 选择器2 {css属性名:属性值;}

  • 在选择器1所找到标签的后代（后代包括：儿子、孙子、重孙子……）中，找到满足选择器2的标签，设置样式

div a {color: red;
}

写法上跟子代选择器相比少了>符号，其实效果是差不多的，基本上没什么大区别。

（4）兄弟选择器

相邻兄弟选择器（亲兄弟相邻的）

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素

 写法：

div + p {color: red;
}

 示例：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="first">我是第一个</div><div class="second">我是第二个</div><div>我是第三个</div>
</body>
</html>

CSS代码：

*{color: red;font-size: 40px;
}.first+div
{color: aquamarine;
}

效果：

 说明：这里只有第二个变颜色是因为这个是通过亲兄弟关系，也就是相邻的满足条件才可以被选中，同时被选中的前一个必须有一个哥哥才可以，否则就不会被选中

 通用兄弟选择器（表兄弟）

通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素

写法：

p ~ p {color: pink;
}

 示例：html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="first">我是第一个</div><div class="second">我是第二个</div><div>我是第三个</div>
</body>
</html>

CSS代码：

*{color: red;font-size: 40px;
}
/*.first~div和div~div  效果是一样的*/
div~div
{color: aquamarine;
}

 效果：

说明：这里是通过表兄弟关系就可以实现选择器，第一个没有变颜色的原因是因为第一个前面没有哥哥，这里要满足条件的是前面必须有一个哥哥，否则就不会被选中 

（5）并集选择器

实现多个无关系或者有关系的标签统一化处理，一般用于两个标签之间的统一处理，格式如下：

选择符1,选择符2{

………………

}

示例：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><a href="https://www.yhdmz2.com/" target="_blank" id="cartoon">点开我开始看动漫<ul><li>first</li><li>second</li><li>third</li></ul>
</body>
</html>

 CSS代码：

#cartoon{text-decoration: none;font-size: 30px;color: blueviolet;
}
body,ul{margin: 0;
}
a>ul>li:nth-of-type(2),a>ul>li:nth-of-type(3){color: brown;
}

 效果：

 这里可以看出，second和third变成了棕色，这里就是通过并集选择器去实现的。

（6）交集选择器

  • 结构：选择器1选择器2{css属性名:属性值;}

  • 找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

  • 交集选择器中的选择器之间是紧挨着的，没有东西分隔

  • 这一类选择器用得很少，一般用于大量代码中精准选择指定的元素标签

示例：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="nice">喜欢看巨人吗</div><p class="good">艾伦.耶格尔</p><p class="better nice">三笠</p>
</body>
</html>

这里我想通过类选择选中下面含有nice类的p标签进行去处理，那同时还不能影响到上面含有nice的div标签，CSS代码写法：

*{color: red;
}
p.nice{font-size: 30px;color: aquamarine;
}

效果：

 这里可以看出，最后一个的字体大小和颜色都不一样，说明选中成功。

好了以上就是本期的全部内容了，你们对CSS选择器是不是有了新的了解呢？去试试做一个简单的网页界面吧！

分享一张壁纸： 

相关文章：

htmlCSS-----CSS选择器（下）

目录 前言&#xff1a; 2.高级选择器 &#xff08;1&#xff09;子代选择器 &#xff08;2&#xff09;伪类选择器 &#xff08;3&#xff09;后代选择器 &#xff08;4&#xff09;兄弟选择器 相邻兄弟选择器 通用兄弟选择器 &#xff08;5&#xff09;并集选择器 &am…...

编程日记 2023/6/4 0:52:31

RDK X3 Module发布，全新软硬件平台加速实现量产级产品落地

机器人开发是一段美妙的旅程。GEEKROS创始人杨状状是地平线社区的一名开发者&#xff0c;热衷于鼓捣各类机器人&#xff0c;2022年&#xff0c;状状第一时间就拿到了地平线旭日X3派&#xff08;简称旭日X3派&#xff09;&#xff0c;基于TogetheROS™.Bot机器人操作系统&#x…...

编程日记 2023/6/4 0:47:30

【面试实战】Redis缓存设计

文章目录 Redis缓存出现的问题🙎‍♂️面试官：什么是缓存雪崩？🙎‍♂️面试官：怎样解决缓存雪崩？🙎‍♂️面试官：什么是缓存击穿？🙎‍♂️面试官：怎样解决缓存击穿？🙎‍♂️面试官：什么是缓存穿透？🙎‍♂️面试官：怎样解决缓存穿透？🙎‍♂️面试官：…...

编程日记 2023/6/4 0:42:29

如何解决js定时器不准确问题

为什么会出现定时器不准确呢&#xff1f; 这个其实就得提到js执行机制了&#xff0c;叫做事件循环Eventloop 循环机制中&#xff0c;异步事件 setInterval 到时后会把回调函数放入消息队列中Event Queue&#xff0c;主线程的宏任务执行完毕后依次执行消息队列的微任务&#xff…...

编程日记 2023/6/4 0:37:28

学习笔记——vue中使用el-dropdown组件报错

今天在工作中&#xff0c;发现使用el-select做的下拉框&#xff0c;下拉菜单展开后&#xff0c;鼠标点击下拉框之外的区域时&#xff0c;下拉菜单没有收起。然后&#xff0c;我打开控制台&#xff0c;发现了这个错误。 Uncaught TypeError: Cannot read properties of null (re…...

编程日记 2023/6/4 0:32:27

Java之旅（八）

Java 条件运算符 Java 条件运算符用于根据一个条件表达式的布尔值来决定程序执行的流程。条件运算符有三种类型&#xff1a;if、else 和 switch。 if 语句的一般格式如下&#xff1a; if (condition) {// 条件为 true 执行的代码块 } 其中&#xff0c;condition 是一个 bool…...

编程日记 2023/6/4 0:27:26

华为OD机试真题（Java），四则运算（100%通过+复盘思路）

一、题目描述 输入一个表达式（用字符串表示），求这个表达式的值。 保证字符串中的有效字符包括[‘0’-‘9’],‘+’,‘-’, ‘*’,‘/’ ,‘(’， ‘)’,‘[’, ‘]’,‘{’ ,‘}’。且表达式一定合法。 数据范围：表达式计算结果和过程中满足∣val∣≤1000 ，字符串长度满…...

编程日记 2023/6/4 0:22:26

HTML表单标签form分析

说明&#xff1a;在html的标签中&#xff0c;表单标签与后台联系密切&#xff0c;像用户登录、注册&#xff0c;都是用到页面的表单标签&#xff0c;用户将信息填入到表单中&#xff0c;提交到后端业务中校验处理&#xff0c;再将结果反馈给前端页面。 表单内的标签分别有&…...

编程日记 2023/6/4 0:17:25

Qt 项目文件Pri详解

在Qt项目中&#xff0c;pri文件(.pri)是一种类似于makefile的文件&#xff0c;用于定义Qt项目中的编译规则。通常可以用pri文件来配置Qt库、头文件、源文件、链接库等信息&#xff0c;这样可以把这些信息定义在一个文件中&#xff0c;避免在每个工程中都进行重复配置&#xff0…...

编程日记 2023/6/4 0:12:24

Keil 5 MDK 发律师函警告了，如何用STCubeIDE开发标准库的程序（STM32F103C8T6为例）

用STCubeIDE进行标准库开发 1、CubeIDE介绍 https://www.stmcu.com.cn/ecosystem/Cube/STM32CubeIDE 2、CubeIDE下载 点击上面的链接&#xff0c;登录即可下载 3、搭建Demo工程 新建一个工作空间 创建一个工程 选择芯片-STM32F103C8T6 填写工程信息 添加标准库到工程 标…...

编程日记 2023/6/4 0:07:23

接口测试--apipost接口断言详解

在做接口测试的时候&#xff0c;会对接口进行断言&#xff0c;一个完整的接口测试&#xff0c;包括&#xff1a;请求->获取响应正文->断言。 一、apipost如何进行断言 apipost的断言设置实在后执行脚本中进行编写的。apipost本身提供了11中断言&#xff1a; apt.asser…...

编程日记 2023/6/4 0:02:22

YYDS练手 130道python练习题 完整版PDF

近年来&#xff0c;Python在编程语言界里赚足了风头&#xff0c;无论是受欢迎程度&#xff0c;还是薪资待遇&#xff0c;都非常可观&#xff0c;相应的&#xff0c;Python岗位要求也越来越高&#xff0c;无论你是零基础还是老前辈&#xff0c;在Python面试中都不能轻视。 不打…...

编程日记 2023/6/3 23:57:21

2-python的变量类型

内容提要 主要回顾了python中的变量类型&#xff0c;区分它们和c中的区别 python中的数字没有long python中的字符串不能被改变&#xff0c;也就是说不能对其内字符元素进行赋值操作 python中列表的数据类型与c访问方式有一定的区别列表的下标可以是负数&#xff0c;无论正负&…...

编程日记 2023/6/3 23:52:20

Python之并发编程一背景知识

一、开篇介绍 顾名思义&#xff0c;进程即正在执行的一个过程。进程是对正在运行程序的一个抽象。 进程的概念起源于操作系统&#xff0c;是操作系统最核心的概念&#xff0c;也是操作系统提供的最古老也是最重要的抽象概念之一。操作系统的其他所有内容都是围绕进程的概念展…...

编程日记 2023/6/3 23:47:19

Redis分区

分区 Redis是单线程的&#xff0c;如何提高多核CPU的利用率&#xff1f; 可以在同一个服务器部署多个Redis的实例&#xff0c;并把他们当作不同的服务器来使用&#xff0c;在某些时候&#xff0c;无论如何一个服务器是不够的&#xff0c; 所以&#xff0c;如果你想使用多个CPU&…...

编程日记 2023/6/3 23:42:18

代码随想录算法训练营第56天 | 583、72

583. 两个字符串的删除操作 题目描述 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 示例1&#xff1a; 输入&#xff1a; w o r d 1 " s e a " , w o r d 2 " e a t …...

编程日记 2023/6/3 23:37:16

c++输入输出文件操作stream

系列文章目录 C IO库 文章目录 系列文章目录前言一、文件IO概述coutcin其他istream类方法 文件输入和输出内核格式化总结 前言 一、文件IO 概述 c程序把输入和输出看作字节流。输入时&#xff0c;程序从输入流中抽取字节&#xff1a;输出时&#xff0c;程序将字节流插入到输…...

编程日记 2023/6/3 23:32:15

【小呆的力学笔记】非线性有限元的初步认识【三】

文章目录 1.2.2 基于最小势能原理的线性有限元一般格式1.2.2.1 离散化1.2.2.2 位移插值1.2.2.3 单元应变1.2.2.4 单元应力1.2.2.5 单元刚度矩阵1.2.2.6 整体刚度矩阵1.2.2.7 处理约束1.2.2.8 求解节点载荷列阵1.2.2.9 求解位移列阵1.2.2.10 计算应力矩阵等 1.2.2 基于最小势能原…...

编程日记 2023/6/3 23:27:14

python计算闰年

这里说明一下&#xff1a;看到网上很多写python计算闰年的&#xff0c;有很多是不同。 有份省级期刊万年历计算公元1-10000年的闰年 算法如下&#xff1a;4000年停闰一次。区别其他算法&#xff0c;有些是3200年停闰一次。 def division(dividend, divisor) -> bool:"…...

编程日记 2023/6/3 23:22:12

聊聊如何使用Js写一个简单的二级联动和三级联动呢？

前言&#xff1a;咳咳哈&#xff0c;大佬说&#xff1a;"这不是有手就行了&#xff1f;"好吧&#xff0c;这里不做过多罗里吧嗦&#xff0c;真的不过多吹&#xff0c;我们在下面直接上代码上注释。 文章目录&#xff1a; 原Js二级联动实现原Js三级联动实现 一、二级…...

编程日记 2023/6/3 23:17:11

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/12/14 0:24:50

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/12/17 20:13:54

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/12/11 9:43:36

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/10/30 21:24:32

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/11/1 12:32:15

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！ 🌱 前言：一棵树的浪漫，从数组开始说起 程序员的世界里，数组是最常见的基本结构之一，几乎每种语言、每种算法都少不了它。可你有没有想过，一组看似“线性排列”的有序数组，竟然可以**“长”成一棵平衡的二…...

编程新知 2025/8/26 4:33:55

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点（小球运动模拟）6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...

编程新知 2025/7/7 1:11:39