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

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

news 2025/9/28 3:44:47

前言

主要内容来自菜鸟教程

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

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/9/25 23:02:22

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/9/27 23:56:59

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/9/28 1:34:35

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/9/11 5:41:27

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/9/19 3:30:35

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/9/26 11:54:19

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2025/9/28 2:17:56

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/8/7 4:06:32

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

编程新知 2025/9/28 3:28:15