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

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

news 2025/6/8 20:50:48

前言

主要内容来自菜鸟教程

CSS 选择器 | 菜鸟教程

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

正文

选择器	CSS	示例	示例说明
基础
*	2	*	选择所有元素
:root	3	:root	选择文档的根元素
element	1	p	选择所有<p>元素
:not(selector)	3	:not(p)	选择所有并非p元素的元素
element,element	1	div,p	选择所有<div>元素和 <p> 元素
#id	1	#firstname	选择所有id="firstname"的元素
.class	1	.intro	选择所有class="intro"的元素
element.class	1	p.hometown	选择所有 class="hometown" 的 <p> 元素
位置关系
element element	1	div p	选择<div>元素内的所有<p>元素
element>element	2	div>p	选择所有父级是 <div> 元素的 <p> 元素
element1~element2	3	p~ul	选择p元素之后的所有ul元素
element+element	2	div+p	选择所有 <div> 元素之后紧跟的第一个 <p> 元素
:first-letter	1	p:first-letter	选择所有<p>元素的第一个字母
:first-line	1	p:first-line	选择所有<p>元素的第一行
:before	2	p:before	在所有<p>元素之前插入内容
:after	2	p:after	在所有<p>元素之后插入内容
包含关系
:first-of-type	3	p:first-of-type	选择是其父级第一个p元素的所有p元素
:nth-of-type(n)	3	p:nth-of-type(2)	选择是其父级第二个p元素的所有p元素
:last-of-type	3	p:last-of-type	选择是其父级最后一个p元素的所有p元素
:nth-last-of-type(n)	3	p:nth-last-of-type(2)	选择是其父级倒数第二个p元素的所有p元素
:only-of-type	3	p:only-of-type	选择是其父级唯一p元素的所有p元素
:empty	3	p:empty	选择没有任何子级的所有p元素（包括文本节点）
父子关系
:first-child	2	p:first-child	选择是其父级第一个子级的所有p元素
:nth-child(n)	3	p:nth-child(2)	选择是其父级第二个子元素的所有p元素
:last-child	3	p:last-child	选择是其父级最后一个子级的所有p元素
:nth-last-child(n)	3	p:nth-last-child(2)	选择是其父级倒数第二个子级的所有p元素
:only-child	3	p:only-child	选择是其父级唯一子级的所有p元素
属性
[attribute]	2	[target]	选择所有设置target属性元素
[attribute=value]	2	[target=-blank]	选择所有target属性等于="-blank"的元素
:lang(language)	2	p:lang(it)	选择所有lang属性的起始值="it"的<p>元素
[attribute\|=language]	2	[lang\|=en]	选择所有lang 属性等于 en，或者以 en- 为开头的元素
[attribute^=value]	3	a[src^="https"]	选择所有src属性的值以"https"开头的元素
[attribute$=value]	3	a[src$=".pdf"]	选择所有src属性的值以".pdf"结尾的元素
[attribute*=value]	3	a[src*="runoob"]	选择所有src属性的值包含子字符串"runoob"的元素
[attribute~=value]	2	[title~=flower]	选择所有title属性包含单词"flower"的元素
链接状态
:link	1	a:link	选择所有未访问链接
:visited	1	a:visited	选择所有访问过的链接
:active	1	a:active	选择活动链接
:hover	1	a:hover	选择鼠标在链接上面时
:target	3	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）
表单状态
:focus	2	input:focus	选择获取焦点的input元素
:enabled	3	input:enabled	选择所有已启用的输入元素
:disabled	3	input:disabled	选择所有禁用的输入元素
:checked	3	input:checked	选择所有选中的输入元素
::selection	3	::selection	选择被用户选中或处于高亮状态的部分
表单属性
:out-of-range	3	:out-of-range	选择值在指定区间之外的input元素
:in-range	3	:in-range	选择值在指定区间之内的input元素
:read-write	3	:read-write	选择可读及可写的元素
:read-only	3	:read-only	选择设置 "readonly"（只读）属性的元素
:optional	3	:optional	选择可选的输入元素
:required	3	:required	选择设置 "required" 属性的元素
:valid	3	:valid	选择输入值合法的元素
:invalid	3	: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 选择器 | 菜鸟教程分类是我自己理解的分类，示例说明优化统一了表述风格。正文选择器CSS示例示例说明基础*2*选择所有元素:root3:root选择文档的根元素element1p选择所有<p>元素:not(selector)3:not(p)选择所有并非p元素…...

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

Python批量给excel文件加密

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

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

程序设计树基础

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

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

Java 并发编程与CAS基本原理

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

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

第一次安装还没运行就出了三个错误： 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支持两种类型的类加载器，分别是引导类加载器（bootstrap classloader）和自定义类加载器（user-defined classloader&a…...

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

电路基础之电容

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

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

函数柯里化

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

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

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

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

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

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

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

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

[C语言] 指针

1. 指针是什么 2. 指针和指针类型 3. 野指针 4. 指针运算 5. 指针和数组 6. 二级指针 7. 指针数组目录 1. 指针是什么？ 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：实现遍历文件夹代码如下 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 是一种分布式版本控制系统，它可以不受网络连接的限制，加上其它众多优点，目前已经成为程序开发人员做项目版本管理时的首选，非开发人员也可以用 Git 来做自己的文档版本管理工具。大概是大二的时候开始接触和使用Gi…...

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

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

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

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

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

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

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

一文读懂HTML

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

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

MOCK测试

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

编程日记 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 部分 — 提高模型准确性

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

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

PDF 转 Markdown

本地可部署的模型 Marker Marker 快速准确地将文档转换为 markdown、JSON 和 HTML。转换所有语言的 PDF、图像、PPTX、DOCX、XLSX、HTML、EPUB 文件在给定 JSON 架构 （beta） 的情况下进行结构化提取设置表格、表单、方程式、内联数学、链接、引用和代…...

编程新知 2025/6/8 19:22:24

Unity | AmplifyShaderEditor插件基础（第五集：简易膨胀shader）

一、👋🏻前言大家好，我是菌菌巧乐兹~本节内容主要讲一下，如何用shader来膨胀~ 效果预览： 二、💨膨胀的基本原理之前的移动是所有顶点朝着一个方向走，所以是移动如果所有顶点照着自己的方…...

编程新知 2025/6/8 19:18:52

【区块链基础】区块链的 Fork（分叉）深度解析：原理、类型、历史案例及共识机制的影响

区块链的 Fork（分叉）全面解析：原理、类型、历史案例及共识机制的影响在区块链技术的发展过程中，Fork（分叉）现象是不可避免且极具影响力的一个环节。理解区块链分叉的形成原因、具体表现以及共识机制对分叉的作用，对于深入把握区块链技术架构及其治理机制至关重要。本…...

编程新知 2025/6/8 12:35:24

动态IP与静态IP：数字世界的“变脸术”与“身份证”

目录动态IP：互联网的“游牧民族” 静态IP：数字世界的“常驻公民” 动态VS静态：场景驱动的选择逻辑未来演进：IP地址的“液态化”趋势选型指南：没有最好，只有最合适在互联网的海洋里，每个…...

编程新知 2025/6/8 3:44:21

【Linux】为 Git 设置 Commit 提交模板方法，可统一个人或者项目的提交风格

为 Git 设置 Commit 提交模板新建模板文件。注意之后不能删除该文件。 gedit ~/.gitmessage.txt粘贴自己的模板。可以给 AI 提自己的需求，定制一个模板，例如 # <type>(<scope>): <description> # # [optional body] # # [optional…...

编程新知 2025/6/8 2:54:29

【Linux内核】设备模型之udev技术详解

目录 1. udev技术概述 2. 技术层次分析 2.1 内核层交互 2.2 规则引擎层 2.3 用户空间实现 3. 关键技术要点 3.1 动态设备节点管理 3.2 热插拔处理 3.3 模块化规则系统 3.3.1. 变量替换功能 3.3.2. 条件判断能力 3.3.3. 实现机制 3.3.4 应用场景 3.3.5 扩展能力 4…...

编程新知 2025/6/8 1:24:47