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

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

news 2026/4/13 12:15:08

前言

主要内容来自菜鸟教程

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

5个步骤掌握H5P交互式视频：让普通视频变身互动教学神器 [特殊字符]

5个步骤掌握H5P交互式视频：让普通视频变身互动教学神器 🎬 【免费下载链接】h5p-interactive-video 项目地址: https://gitcode.com/gh_mirrors/h5/h5p-interactive-video 想要将枯燥的教学视频转变为引人入胜的互动体验吗？H5P交互式…...

编程新知 2026/4/13 12:11:11

手机号码定位系统：3分钟实现精准地理位置查询的终极指南

手机号码定位系统：3分钟实现精准地理位置查询的终极指南【免费下载链接】location-to-phone-number This a project to search a location of a specified phone number, and locate the map to the phone number location. 项目地址: https://gitcode.com/gh_mi…...

编程新知 2026/4/13 11:54:02