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

html之CSS的高级选择器应用

news 2025/8/15 6:43: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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...

编程新知 2025/8/14 21:19:36

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致：梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/11 5:17:37

【JVM】- 内存结构

引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...

编程新知 2025/8/6 10:07:53

Java-41 深入浅出 Spring - 声明式事务的支持事务配置 XML模式 XML+注解模式

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2025/8/11 19:40:33

相机从app启动流程

一、流程框架图二、具体流程分析 1、得到cameralist和对应的静态信息目录如下：重点代码分析：启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/8/6 0:19:15

linux 下常用变更-8

1、删除普通用户查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行，YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID： YW3…...

编程新知 2025/7/26 13:12:42

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容本期用到的软件：yakit（因为经过之前好多期…...

编程新知 2025/8/13 3:41:20

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2025/7/4 0:33:02

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全，让Comfyui导出的图像不包含工作流信息，导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo（推荐） 在 save_images 方法中，删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 （一）项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台，其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言，首次接触 OpenBCI 设备时，往…...

编程新知 2025/8/14 16:36:16

文章目录

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

二、高级选择器的应用

1、层次选择器

后代选择器

子选择器

相邻兄弟选择器

通用兄弟选择器

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

3、属性选择器

E[attr]

E[attr=val]

E[attr^=val]

E[attr$=val]

E[attr*=val]

相关文章：