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

html之CSS的高级选择器应用

news 2026/2/7 22:41:26

文章目录

一、CSS高级选择器有哪些呢？
二、高级选择器的应用
- 1、层次选择器
- - 后代选择器
  - 子选择器
  - 相邻兄弟选择器
  - 通用兄弟选择器
- 2、结构伪类选择器（不常用）
- 3、属性选择器
- - E[attr]
  - E[attr=val]
  - E[attr^=val]
  - E[attr$=val]
  - E[attr*=val]

一、CSS高级选择器有哪些呢？

1、层次选择器
2、结构伪类选择器
3、属性选择器

二、高级选择器的应用

1、层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

后代选择器

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>body p{width: 200px;height: 200px;background-color: red;}
</style>
<body>
<p></p>
</body>
</html>

运行结果：
在这里插入图片描述

子选择器

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>body>p{background-color: red;}p{width: 200px;height: 200px;background-color: black;}
</style>
<body>
<p></p>
<p></p>
<p></p>
</body>
</html>

运行结果：
在这里插入图片描述

相邻兄弟选择器

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.aa+p{background-color: red;}p{width: 200px;height: 200px;background-color: black;}
</style>
<body>
<p class="aa"></p>
<p></p>
<p></p>
</body>
</html>

运行结果：
在这里插入图片描述

通用兄弟选择器

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.aa~p{background-color: red;}p{width: 200px;height: 200px;background-color: black;}
</style>
<body>
<p class="aa"></p>
<p></p>
<p></p>
</body>
</html>

运行结果：
在这里插入图片描述

2、结构伪类选择器（不常用）

属性选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

3、属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

E[attr]

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class]{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果：
在这里插入图片描述

E[attr=val]

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class='aaaa']{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果：
在这里插入图片描述

E[attr^=val]

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class^='qw']{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果：
在这里插入图片描述

E[attr$=val]

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class$='kl']{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果：
在这里插入图片描述

E[attr*=val]

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class*='e']{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果：
在这里插入图片描述

html之CSS的高级选择器应用

文章目录一、CSS高级选择器有哪些呢？二、高级选择器的应用1、层次选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器 2、结构伪类选择器（不常用）3、属性选择器E[attr]E[attrval]E[attr^val]E[attr$val]E[attr*val] 一、CSS高级选择器有…...

编程日记 2023/12/19 20:29:30

elementui+ ＜el-date-picker type=“datetime“/＞时间组件的当前时间的180天之内的禁止选择处理

需求1如下：当前时间180天不可选择，180天之后可以选择，之前的时间都禁止选择页面代码如下： <el-date-picker v-model"temp.expire_time" :picker-options"pickerOption" type"datetime" placeh…...

编程日记 2023/12/19 20:28:29

全网好听的BGM都在这里下载，赶紧收藏好了

无论是自媒体创作者还是从事视频剪辑工作的朋友，对于BGM的选择都很重要，一首适配的BGM能大大提升你作品的质量，还能让作品更优秀。哪里才能找到好听又免费的BGM？下面推荐几个我多年收藏的6个音效、音频素材网站，赶紧收…...

编程日记 2023/12/19 20:27:28

Spark编程实验一：Spark和Hadoop的安装使用

目录一、目的与要求二、实验内容三、实验步骤 1、安装Hadoop和Spark 2、HDFS常用操作 3、Spark读取文件系统的数据四、结果分析与实验体会一、目的与要求 1、掌握在Linux虚拟机中安装Hadoop和Spark的方法； 2、熟悉HDFS的基本使用方法； 3、掌…...

编程日记 2023/12/19 20:26:27

代理和AOP

一:java代理整体分为两种：静态代理和动态代理静态代理：23种设计模式里面有个代理模式，那个就是静态代理。动态代理：分为编译时增强(AspectJ)和运行时增强(JDK动态代理和CGLIB动态代理) 1:静态代理这种代理在我们日常生活中其…...

编程日记 2023/12/19 20:25:26

Solidity-3-类型

Solidity 是一种静态类型语言，这意味着每个变量（状态变量和局部变量）都需要在编译时指定变量的类型。 “undefined”或“null”值的概念在Solidity中不存在，但是新声明的变量总是有一个默认值 ，具体的默认值跟类型相…...

编程日记 2023/12/19 20:22:24

mask图像转json文件当只有mask图像时，可使用下面代码得到json文件 import cv2 import os import json import sysdef func(file:str) -> dict:png cv2.imread(file)gray cv2.cvtColor(png, cv2.COLOR_BGR2GRAY)_, binary cv2.threshold(gray,10,255,cv2.TH…...

编程日记 2023/12/19 20:20:22

华清远见嵌入式学习——ARM——作业1

要求： 代码： mov r0,#0 用于加mov r1,#1 初始值mov r2,#101 终止值loop: cmp r1,r2addne r0,r0,r1addne r1,r1,#1bne loop 效果：...

编程日记 2023/12/19 20:17:19

如何在公网环境使用固定域名远程访问内网BUG管理系统协同办公

文章目录前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…...

编程日记 2023/12/19 20:15:18

k8s pod网络排查教程

1、背景背景：在日常的k8s运维中，经常会遇到pod之间网络无法访问，域名无法解释的情况。且容器中网络排查命令不全，导致无法准确定位问题。 2、nsenter介绍 #Centos 下载方式 $ yum install util-linux -ynsenter 是一个 Linux …...

编程日记 2023/12/19 20:03:08

Apollo Planning——换道：LANE_CHANGE_DECIDER

LaneChangeDecider 是lanefollow 场景下，所调用的第一个task，它的作用主要有两点：判断当前是否进行变道，以及变道的状态，并将结果存在变量lane_change_status中；变道过程中将目标车道的reference line放置到…...

编程日记 2023/12/19 20:00:04

Python 爬虫之简单的爬虫（三）

爬取动态网页（上） 文章目录爬取动态网页（上）前言一、大致内容二、基本思路三、代码编写1.引入库2.加载网页数据3.获取指定数据总结前言之前的两篇写的是爬取静态网页的内容，比较简单。接下来呢给大家讲一下如何去…...

编程日记 2023/12/19 19:59:03

为突发事件提供高现势性数据支撑!大势智慧助力中山市2023应急测绘保障演练举行

12月14日，2023年度中山市应急测绘保障演练在中山树木园举行，市自然资源局总工程师邓宇文出席本次演练活动。来自全市自然资源、应急管理部门和部分测绘单位的近70人现场观摩了演练。本次演练由中山市自然资源局主办、中山市自然资源信息中心承办&#xf…...

编程日记 2023/12/19 19:51:56

图片速览 OOD用于零样本 OOD 检测的 CLIPN：教 CLIP 说不

PAPERCODEhttps://arxiv.org/pdf/2308.12213v2.pdfhttps://github.com/xmed-lab/clipn 文章创新以往由CLIP驱动的零样本OOD检测方法，只需要ID的类名，受到的关注较少。本文提出了一种新的方法，即CLIP说“不”（CLIPN）…...

编程日记 2023/12/19 19:46:51

a16z：加密行业2024趋势“无缝用户体验”

近日，知名加密投资机构a16z发布了“Big ideas 2024”，列出了加密行业在 2024 年几个具备趋势的“大想法”，其中 Seamless UX（无缝用户体验）赫然在列。从最为直观的理解上，Seamless UX 是在强调用户在使用产…...

编程日记 2023/12/19 19:44:49

C# WPF上位机开发（属性页面的设计）

编程日记 2023/12/19 19:40:46

macOS 安装 oh-my-zsh 后 node 报错 command not found : node

最近为了让终端中显示 git 分支的名称，安装了 oh-my-zsh ，安装之后呢，我原先安装的 Volta、 node 都没法用了，报错如下： 这时候粗略判断应该是系统变量出了问题，oh-my-zsh 的变量文件是 ~/.zshrc&#xff0…...

编程日记 2023/12/19 19:39:45

AI 绘画 | Stable Diffusion 视频数字人

前言本篇文章教会你如何利用Stable Diffusion WEB UI，使用一个人物图片转换成为一个口播视频。本篇内容的教程以WINDOWS系统为例，教你如何安装使用。先看视频效果彭于晏图片生成口播视频安装首先需要在windows电脑上安装ffmpeg，按照本教程《在 Windows PC 上轻松下载并…...

编程日记 2023/12/19 19:38:44

《代码随想录》--二叉树（一）

《代码随想录》--二叉树第一部分 1、二叉树的递归遍历2、二叉树的迭代遍历3、统一风格的迭代遍历代码4、二叉树的层序遍历226.翻转二叉树 1、二叉树的递归遍历前序遍历中序遍历后序遍历代码前序遍历 class Solution {public List<Integer> preorderTraversal(T…...

编程日记 2023/12/19 19:35:41

shell编程-数组与运算符详解（超详细）

文章目录前言一、 Shell数组1. 声明和初始化数组2. 访问数组元素3. 数组长度4. 遍历数组5. 修改数组元素6. 删除数组元素7. 示例二、Shell运算符1. 算术运算符1.1 加法运算符 ()1.2 减法运算符 (-)1.3 乘法运算符 (*)1.4 除法运算符 (/)1.5 取余运算符 (%) 2. 关系运算符2.1 …...

编程日记 2023/12/19 19:33:39

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程名&…...

编程新知 2026/1/23 10:51:19

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53