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

html之CSS的高级选择器应用

news 2026/2/7 21:28:31

文章目录

一、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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/4 16:30:39

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2026/2/4 2:08:30

简易版抽奖活动的设计技术方案

1.前言本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/2/7 17:41:40

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示最终上报fail 解决方法内核升级导致，需要在新内核下重新下载编译安装查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40