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

html之CSS的高级选择器应用

news 文章来源：https://blog.csdn.net/weixin_72473547/article/details/134931640 2025/5/1 6:50:46

文章目录

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

Vim入门

Vim使用入门 1.Vim编辑器的三种常用模式一般模式：刚打开文件是它，从编辑模式按“ESC”退回的模式也是它。可以执行各种编辑操作，如移动光标、复制、粘贴、删除、查找替换等 ; 编辑模式：在一般模式下按下 i、I、a、A、o、O 等键…...

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

动态加载库

no_mangle 不要改标识符首先是认识这个标注：mangle，英文的含义“撕裂、碾压”。我第一次把这个单次误以为是manage，说实话两个单词还挺像的。 RUS中函数或静态变量使用#[no_mangle]这个标注属性后，编译器就不会修改它们的名字了…...

编程日记 2023/12/19 19:30:36

React中渲染html结构---dangerouslySetInnerHTML

dangerouslySetInnerHTML胡子{}语法绑定的内容全部作为普通文本渲染，渲染html结构基于---dangerouslySetInnerHTMLdangerouslySetInnerHTML是React标签的一个属性，类似于vue的v-html有2个{{}},第一个{}代表jsx语法开始，第二个是代表dangerous…...

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

计网02-计算机网络参考模型

一、OSI七层参考模型 1、分层的思想分层模型用于网络协议的设计方法，本质是将网络节点间复杂的通信问题分成若干简单的问题逐一解决，通过网络的层次去找问题，将复杂问题简单化。 2、OSI参考模型由于早期计算机厂商使用的是私有的网络模…...

编程日记 2023/12/19 19:28:34

模块测试：确保软件质量的关键步骤

引言： 在软件开发过程中，模块测试是确保软件质量的关键环节。通过模块化的设计和测试方法，可以提高开发效率、降低错误率，并最终提供稳定可靠的软件产品。本文将介绍模块测试的概念、重要性以及实施步骤，帮助读者了解如…...

编程日记 2023/12/19 19:24:30

Postman接口测试之Postman常用的快捷键

作为一名IT程序猿，不懂一些工具的快捷方式，应该会被鄙视的吧。收集了一些Postman的快捷方式，大家一起动手操作~ 简单操作 xc 请求操作MAC系统windows系统请求网址 ⌘L Ctrl L 保存请求 ⌘S Ctrl S 保存请求为 ⇧⌘S Ctrl Shift S发送…...

编程日记 2023/12/19 19:23:29

keil自动分配SDRAM空间设置使用

1.修改.sct文件添加 RW_RAM1 0xC0400000 UNINIT 0x00400000 { ; RW data .ANY (SD_RAM1) 使用 #define LOCATION_ATTRIBUTE(name) __attribute__ ((section(name))) __attribute__ ((aligned(4)))uint8_t sdram_buf[0x100000] __attribute__ ((section("SD_RAM1")…...

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