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

CSS选择器分类梳理并高亮重点

news 2025/11/21 5:50:35

前言

主要内容来自菜鸟教程

CSS 选择器 | 菜鸟教程

分类是我自己理解的分类，示例说明优化统一了表述风格。

正文

选择器CSS示例示例说明
基础
*2*选择所有元素
:root3:root选择文档的根元素
element1p选择所有<p>元素
:not(selector)3:not(p)选择所有并非p元素的元素
element,element1div,p选择所有<div>元素和 <p> 元素
#id1#firstname选择所有id="firstname"的元素
.class1.intro选择所有class="intro"的元素
element.class1p.hometown选择所有 class="hometown" 的 <p> 元素
位置关系
element element1div p选择<div>元素内的所有<p>元素
element>element2div>p选择所有父级是 <div> 元素的 <p> 元素
element1~element23p~ul选择p元素之后的所有ul元素
element+element2div+p选择所有 <div> 元素之后紧跟的第一个 <p> 元素
:first-letter1p:first-letter选择所有<p>元素的第一个字母
:first-line1p:first-line选择所有<p>元素的第一行
:before2p:before在所有<p>元素之前插入内容
:after2p:after在所有<p>元素之后插入内容
包含关系
:first-of-type3p:first-of-type选择是其父级第一个p元素的所有p元素
:nth-of-type(n)3p:nth-of-type(2)选择是其父级第二个p元素的所有p元素
:last-of-type3p:last-of-type选择是其父级最后一个p元素的所有p元素
:nth-last-of-type(n)3p:nth-last-of-type(2)选择是其父级倒数第二个p元素的所有p元素
:only-of-type3p:only-of-type选择是其父级唯一p元素的所有p元素
:empty3p:empty选择没有任何子级的所有p元素（包括文本节点）
父子关系
:first-child2p:first-child选择是其父级第一个子级的所有p元素
:nth-child(n)3p:nth-child(2)选择是其父级第二个子元素的所有p元素
:last-child3p:last-child选择是其父级最后一个子级的所有p元素
:nth-last-child(n)3p:nth-last-child(2)选择是其父级倒数第二个子级的所有p元素
:only-child3p:only-child选择是其父级唯一子级的所有p元素
属性
[attribute]2[target]选择所有设置target属性元素
[attribute=value]2[target=-blank]选择所有target属性等于="-blank"的元素
:lang(language)2p:lang(it)选择所有lang属性的起始值="it"的<p>元素
[attribute|=language]2[lang|=en]选择所有lang 属性等于 en，或者以 en- 为开头的元素
[attribute^=value]3a[src^="https"]选择所有src属性的值以"https"开头的元素
[attribute$=value]3a[src$=".pdf"]选择所有src属性的值以".pdf"结尾的元素
[attribute*=value]3a[src*="runoob"]选择所有src属性的值包含子字符串"runoob"的元素
[attribute~=value]2[title~=flower]选择所有title属性包含单词"flower"的元素
链接状态
:link1a:link选择所有未访问链接
:visited1a:visited选择所有访问过的链接
:active1a:active选择活动链接
:hover1a:hover选择鼠标在链接上面时
:target3#news:target选择当前活动的#news元素（包含该锚名称的点击的URL）
表单状态
:focus2input:focus选择获取焦点的input元素
:enabled3input:enabled选择所有已启用的输入元素
:disabled3input:disabled选择所有禁用的输入元素
:checked3input:checked选择所有选中的输入元素
::selection3::selection选择被用户选中或处于高亮状态的部分
表单属性
:out-of-range3:out-of-range选择值在指定区间之外的input元素
:in-range3:in-range选择值在指定区间之内的input元素
:read-write3:read-write选择可读及可写的元素
:read-only3:read-only选择设置 "readonly"（只读） 属性的元素
:optional3:optional选择可选的输入元素
:required3:required选择设置 "required" 属性的元素
:valid3:valid选择输入值合法的元素
:invalid3:invalid

选择输入值非法的元素测试代码

测试代码

<!DOCTYPE >
<html><head><meta charset="utf-8" /><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><title>测试css</title><style>div {width: 400px;min-height: 100px;border: 1px solid #999;}div + p {color: red;}p.testp::first-letter {color: blue;font-weight: bold;font-size: 2rem;}p.testp::first-line {background-color: #ccc;}p:first-of-type {font-size: 2rem;}p:empty {width: 200px;height: 36px;background-color: green;}</style></head><body><div class="test1">测试div1</div><div><p>测试p，文档中第一个p</p><p>测试p，文档中第二个p</p></div><p>测试p1</p><div class="test2">测试div2</div><p>测试p2</p><div class="test3">测试div3</div><p>测试p3</p><hr /><p class="testp">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, idprovident! Ex eum harum recusandae, ab ut, enim odit necessitatibusimpedit eligendi soluta, magnam eveniet perferendis a nihil hic minima.</p><p></p><script></script></body>
</html>

 

 

相关文章：

CSS选择器分类梳理并高亮重点

前言 主要内容来自菜鸟教程 CSS 选择器 | 菜鸟教程 分类是我自己理解的分类&#xff0c;示例说明优化统一了表述风格。 正文 选择器CSS示例示例说明基础*2*选择所有元素:root3:root选择文档的根元素element1p选择所有<p>元素:not(selector)3:not(p)选择所有并非p元素…...

编程日记 2023/8/14 6:45:04

Python批量给excel文件加密

有时候我们需要定期给公司外部发邮件&#xff0c;在自动化发邮件的时候需要对文件进行加密传输。本文和你一起来探索用python给单个文件和批量文件加密。    python自动化发邮件可参考【干货】用Python每天定时发送监控邮件。 文章目录 一、安装pypiwin32包二、定义给excel加…...

编程日记 2023/8/14 6:44:04

程序设计 树基础

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…...

编程日记 2023/8/14 6:43:03

Java 并发编程与CAS基本原理

一、Java并发基础知识 Java里的程序天生就是多线程的&#xff0c;那么有几种新启线程的方式&#xff1f; 两种,启动线程的方式只有&#xff1a; 1、X extends Thread;&#xff0c;然后X.start&#xff1b; 2、X implements Runnable&#xff1b;然后交给Thread运行。 Java…...

编程日记 2023/8/14 6:42:01

qt creater运行按钮灰色，问题记录

第一次安装还没运行就出了三个错误&#xff1a; 1.F:\wei\Qt\Tools\CMake_64\share\cmake-3.24\Modules\CMakeTestCXXCompiler.cmake:62: error: The C compiler "C:/Program Files (x86)/Microsoft Visual Studio 14.0/VC/BIN/amd64/cl.exe" is not able to compil…...

编程日记 2023/8/14 6:41:00

【jvm】类加载器的分类

目录 一、说明二、示例2.1 代码2.2 截图 三、启动类加载器四、扩展类加载器五、应用程序类加载器 一、说明 1.jvm支持两种类型的类加载器&#xff0c;分别是引导类加载器&#xff08;bootstrap classloader&#xff09;和自定义类加载器&#xff08;user-defined classloader&a…...

编程日记 2023/8/14 6:39:57

电路基础之电容

电容器&#xff08;Capacitor&#xff09;是由两个导体电极之间夹着一个电介质而组成的元件。这两个电极可以是金属板、箔片、涂层等&#xff0c;而电介质则是放置在电极之间的绝缘材料。电容器的基本构成包括以下几个要素&#xff1a; 电极&#xff1a;电容器的电极是两个导体…...

编程日记 2023/8/14 6:38:56

函数柯里化

文章目录 基本概念柯里化&#xff08;Currying&#xff09;是什么&#xff1f;通用的柯里化实现ES5 实现ES6 实现 基本概念 在讲柯里化之前我们先来了解一些基本概念&#xff1a; Function.length&#xff1a; length 属性指明函数的形参个数 function func1() {} function …...

编程日记 2023/8/14 6:37:55

【HBZ分享】ES中的Reindex重建索引

Reindex如何实现索引重建&#xff1f; 滚动索引 批量复制 Reindex存在的问题 如果新的索引没有提前创建好&#xff0c;并指定字段类型&#xff0c;那么重建后的新索引类型极有可能会和旧的索引不一致&#xff0c;因为ES他会推断类型&#xff0c;而推断错误率从实战来说那是…...

编程日记 2023/8/14 6:36:54

【PostgreSQL】几个提高性能的小特性

一、LOCALE 与 “operator class” 在PostgreSQL里&#xff0c;LOCALE默认使用C的本地化规则。LOCALE是一种文化偏好的区域设置&#xff0c;包括字母表、排序、数字格式等。 LOCALE里有一个比较重要的规则LC_COLLATE&#xff0c;即排序方式(Collation)&#xff0c;它会对数据…...

编程日记 2023/8/14 6:35:53

[C语言] 指针

1. 指针是什么 2. 指针和指针类型 3. 野指针 4. 指针运算 5. 指针和数组 6. 二级指针 7. 指针数组 目录 1. 指针是什么&#xff1f; 2. 指针和指针类型 2.1 指针-整数 2.2 指针的解引用 3. 野指针 3.1 野指针成因 3.2 如何规避野指针 4. 指针运算 4.1 指针…...

编程日记 2023/8/14 6:34:51

win10在vmware15中安装macos10.13系统

第一步、安装vmware版本信息如下 第二步、下载unlocker-main和darwin.iso放到安装文件夹 第三步、管理员身份运行win-install.cmd 第四步、运行vmware新建虚拟机 第五步、启动新创建的虚拟机macOS 10.13并选择语言 第六步、选择磁盘工具抹掉磁盘 第七步、格式化完成后退出磁盘工…...

编程日记 2023/8/14 6:33:49

Node.js：实现遍历文件夹下所有文件

Node.js&#xff1a;实现遍历文件夹 代码如下 const fs require(fs) const path require(path)function traverseFolder(folderPath) {// 读取文件夹列表const files fs.readdirSync(folderPath)// 遍历文件夹列表files.forEach(function (fileName) {// 拼接当前文件路径…...

编程日记 2023/8/14 6:32:48

Git详解及使用

Git简介 Git 是一种分布式版本控制系统&#xff0c;它可以不受网络连接的限制&#xff0c;加上其它众多优点&#xff0c;目前已经成为程序开发人员做项目版本管理时的首选&#xff0c;非开发人员也可以用 Git 来做自己的文档版本管理工具。 大概是大二的时候开始接触和使用Gi…...

编程日记 2023/8/14 6:31:46

Jmeter设置中文的两种方式，建议使用第二种

方案一 进入jmeter图像化界面&#xff0c;选择Options下的Choose Language&#xff0c;再选择Chinese(Simplified)。这个就是选择语言为简体中文&#xff08;缺陷&#xff1a;这个只是在本次使用时为中文&#xff0c;下次打开默认还是英文的&#xff09; 方案二&#xff08;…...

编程日记 2023/8/14 6:30:45

【ARM 嵌入式 编译系列 7.1 -- GCC 链接脚本中节区及各个段的详细介绍】

文章目录 什么是Section(节区)输入文件常见节区有哪些&#xff1f;什么是 glue code&#xff1f;.glue_7和.glue_7的作用是什么&#xff1f;链接脚本中的 KEEP 关键字是什么呢作用&#xff1f;链接脚本中的 PROVIDE 关键字是什么呢作用&#xff1f; 上篇文章&#xff1a;ARM 嵌…...

编程日记 2023/8/14 6:29:44

一文读懂HTML

文章目录 HTML的历史HTML的作用HTML的基本语言 HTML的历史 HTML&#xff08;HyperText Markup Language&#xff09;的历史可以追溯到20世纪90年代早期&#xff0c;它是互联网发展的重要里程碑之一。以下是HTML的历史概述&#xff1a; 早期阶段&#xff08;1980年代末 - 1990年…...

编程日记 2023/8/14 6:28:42

MOCK测试

介绍 mock&#xff1a;就是对于一些难以构造的对象&#xff0c;使用虚拟的技术来实现测试的过程。 mock测试&#xff1a;在测试过程中&#xff0c;对于某些不容易构造或者不容易获取的对象&#xff0c;可以用一个虚拟的对象来代替的测试方 法。 接口Mock测试&#xff1a;在接口…...

编程日记 2023/8/14 6:27:39

Flutter源码分析笔记：Widget类源码分析

Flutter源码分析笔记 Widget类源码分析 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/132259681 【介绍】&#x…...

编程日记 2023/8/14 6:26:38

PyTorch 微调终极指南：第 2 部分 — 提高模型准确性

一、说明 如今&#xff0c;在训练深度学习模型时&#xff0c;通过在自己的数据上微调预训练模型来迁移学习已成为首选方法。通过微调这些模型&#xff0c;我们可以利用他们的专业知识并使其适应我们的特定任务&#xff0c;从而节省宝贵的时间和计算资源。本文分为四个部分&…...

编程日记 2023/8/14 6:25:37

HTML 语义化

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

编程新知 2025/10/27 5:01:21

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/11/16 21:53:00

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/11/16 2:18:34

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/11/17 6:22:53

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/11/17 12:53:32

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/11/17 12:53:00

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/11/16 22:01:20

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/11/17 2:50:22