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

CSS新手入门笔记整理：CSS3选择器

news 2026/5/14 8:25:55

属性选择器

属性选择器，指的是通过“元素的属性”来选择元素的一种方式。

语法

元素[attr^="xxx"]{}
元素[attr$="xxx"]{}
元素[attr*="xxx"]{}

选择器

说明

E[attr^="xxx"]

选择元素E，其中E元素的attr属性是以xxX开头的任何字符

E[attr$="xxx”]

选择元素E，其中E元素的attr属性是以xxX结尾的任何字符

E[attr*="xxx"]

选择元素E，其中E元素的attr属性是包含xXX的任何字符

子元素伪类选择器

子元素伪类选择器，指的就是选择某一个元素下的子元素。

第一类

选择器

说明

E:first-child

选择父元素下的第一个子元素(该子元素类型为E，以下类同)

E:last-child

选择父元素下的最后一个子元素

E:nth-child(n)

选择父元素下的第n个子元素或奇偶元素，n取值有3种:数字、odd（奇数列）和even（偶数列），其中n从1开始。

E:only-child

选择父元素下唯一的子元素，该父元素只有一个子元素

语法

父元素 E:first-child{}
父元素 E:last-child{}
父元素 E:nth-child(n){}
父元素 E:only-child{}

第二类

选择器

说明

E:first-of-type

选择父元素下的第一个E类型的子元素

E:last-of-type

选择父元素下的最后一个E类型的子元素

E:nth-of-type(n)

选择父元素下的第n个E类型的子元素或奇偶元素，n取值有3种数字、odd（奇数列）和even（偶数列），n从1开始

E:only-of-type

选择父元素下唯一的E类型的子元素，该父元素可以有多个子元素

语法

父元素 E:first-of-type{}
父元素 E:last-of-type{}
父元素 E:nth-of-type(n){}
父元素 only-of-type{}

区别

:first-child在选择父元素下的子元素时，不仅要区分元素类型，还要求是第一个子元素。而:first-of-type在选择父元素下的子元素时，只需要区分元素类型，不要求是第一个子元素。

UI伪类选择器

  • UI伪类选择器，指的是针对“元素的状态”来选择元素的一种伪类选择器。UI，全称“User Interface”，用户界面。
  • 元素的状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。
  • UI伪类选择器特点是：对于指定的样式，在默认状态下不起作用，只有当元素处于某种状态时才起作用。
  • 大多数UI伪类选择器都是针对表单元素的。

选择器

说明

:focus

定义元素获取焦点时使用的样式。

::selection

定义页面中被选中文本的样式。

:checked

定义页面中被选中文本的样式。

:enabled

定义表单元素“可用”时的样式

:disabled

定义表单元素“禁用”时的样式

:read-write

定义表单元素“可读写”时的样式

:read-only

定义表单元素“只读”时的样式

语法

表单元素 :focus{}
表单元素 ::selection{}
表单元素 :checked{}
表单元素 :enabled{}
表单元素 :disabled{}
表单元素 :read-write{}
表单元素 :read-only{}

其他伪类选择器

选择器

说明

:root

选择HTML页面的根元素<html></html>。

:empty

选择一个“不包含任何子元素和内容”的元素即空元素。

:target

选取页面中的某一个target元素。target元素指的是id被当成页面的锚点链接来使用的元素。

:not()

选取某一个元素之外的所有元素。

语法

:root{}
:empty{}
:target{}
:not(){}

相关文章：

CSS新手入门笔记整理：CSS3选择器

属性选择器 属性选择器&#xff0c;指的是通过“元素的属性”来选择元素的一种方式。 语法 元素[attr^"xxx"]{} 元素[attr$"xxx"]{} 元素[attr*"xxx"]{} 选择器 说明 E[attr^"xxx"] 选择元素E&#xff0c;其中E元素的attr属性是…...

编程日记 2023/12/17 8:24:57

D34|不同路径

62.不同路径 初始思路&#xff1a; 1&#xff09;确定dp数组以及下标的含义&#xff1a; dp[i][i]存放到第i1行和第i1列的方法数 2&#xff09;确定递推公式&#xff1a; dp[i][i] dp[i -1][i] dp[i][i-1] 3&#xff09;dp数组如何初始化 第0行是1&#xff1b; 第0列是1&a…...

编程日记 2023/12/17 8:23:56

【运维】Kafka高可用： KRaft（不依赖zookeeper）集群搭建

文章目录 一. kafka kraft 集群介绍1. KRaft架构2. Controller 服务器3. Process Roles4. Quorum Voters5. kraft的工作原理 ing 二. 集群安装1. 安装1.1. 配置1.2. 格式化 2. 启动测试2.1. 启功节点服务2.2. 测试 本文主要介绍了 kafka raft集群架构&#xff1a; 与旧架构的不…...

编程日记 2023/12/17 8:21:54

Python 自动化之批量处理文件（一）

批量新建目录、文档Pro版本 文章目录 批量新建目录、文档Pro版本前言一、做成什么样子二、基本思路1.引入库2.基本架构 三、用户输入模块四、数据处理模块1.excel表格数据获取2.批量数据的生成 总结 前言 我来写一个不一样的批量新建吧。在工作中&#xff0c;有些同学应该会遇…...

编程日记 2023/12/17 8:19:52

力扣72. 编辑距离

动态规划 思路&#xff1a; 假设 dp[i][j] 是 word1 前 i 个字母到 word2 前 j 个字母的编辑距离&#xff1b;那么状态 dp[i][j] 状态的上一个状态有&#xff1a; dp[i - 1][j]&#xff0c;word1 前 i - 1 个字母到 word2 前 j 个字母的编辑距离&#xff0c;此状态再插入一个字…...

编程日记 2023/12/17 8:14:47

Unity中 URP Shader 的纹理与采样器的分离定义

文章目录 前言一、URP Shader 纹理采样的实现1、在属性面板定义一个2D变量用于接收纹理2、申明纹理3、申明采样器4、进行纹理采样 二、申明纹理 和 申明采样器内部干了什么1、申明纹理2、申明采样器 三、采样器设置采样器的传入格式1、纹理设置中&#xff0c;可以看见我们的采样…...

编程日记 2023/12/17 8:13:46

Electron学习第一天 ，启动项目

之前在安装官网的步骤操作&#xff0c;结果报错&#xff0c;找了好多办法&#xff0c;最后这种办法成功启动项目&#xff0c;并且没有报错&#xff0c;特此记录 特别提醒&#xff0c;最好安装淘宝镜像&#xff0c;npm 太慢&#xff0c;会导致报错问题&#xff0c;解决起来个人觉…...

编程日记 2023/12/17 8:12:45

WebService技术--随笔1

1.WebService 发展史 创建阶段&#xff08;1990 年代末至 2000 年代初&#xff09;&#xff1a;在这个阶段&#xff0c;XML-RPC 和 SOAP 协议被引入&#xff0c;为跨平台和跨语言的应用程序集成提供了基础。XML-RPC 提供了一种基于 XML 的远程过程调用机制&#xff0c;而 SOAP…...

编程日记 2023/12/17 8:11:44

如何使用Docker将.Net6项目部署到Linux服务器（一）

目录 一 配置服务器环境 1.1 配置yum 1.1.1 更新yum包 1.1.2 yum命令 1.2 配置docker …...

编程日记 2023/12/17 8:09:42

第4章-第3节-Java中跟数组相关的几个算法以及综合应用

在写这篇博文之前&#xff0c;先大概说明一下&#xff0c;就是很常见的数组算法如求最大值、一维数组的遍历等&#xff0c;这里就不去专门说明了&#xff0c;只说一些有代表性的&#xff0c;然后就是冒泡排序算法很容易查阅到&#xff0c;这里也不专门说明了&#xff0c;只说明…...

编程日记 2023/12/17 8:08:41

AlexNet(pytorch)

AlexNet是2012年ISLVRC 2012&#xff08;ImageNet Large Scale Visual Recognition Challenge&#xff09;竞赛的冠军网络&#xff0c;分类准确率由传统的 70%提升到 80% 该网络的亮点在于&#xff1a; &#xff08;1&#xff09;首次利用 GPU 进行网络加速训练。 &#xff…...

编程日记 2023/12/17 8:06:39

【单调栈 】LeetCode321:拼接最大数

作者推荐 【动态规划】【广度优先搜索】LeetCode:2617 网格图中最少访问的格子数 本文涉及的知识点 单调栈 题目 给定长度分别为 m 和 n 的两个数组&#xff0c;其元素由 0-9 构成&#xff0c;表示两个自然数各位上的数字。现在从这两个数组中选出 k (k < m n) 个数字…...

编程日记 2023/12/17 8:05:38

TikTok与虚拟现实的完美交融：全新娱乐时代的开启

TikTok&#xff0c;这个风靡全球的短视频平台&#xff0c;与虚拟现实&#xff08;VR&#xff09;技术的深度结合&#xff0c;为用户呈现了一场全新的娱乐盛宴。虚拟现实技术为TikTok带来了更丰富、更沉浸的用户体验&#xff0c;标志着全新娱乐时代的开启。本文将深入探讨TikTok…...

编程日记 2023/12/17 7:54:28

PXI/PCIe/VPX机箱 ARM|x86 + FPGA测试测量板卡解决方案

PXI便携式测控系统是一种基于PXI总线的便携式测试测控系统&#xff0c;它填补了现有台式及机架式仪器在外场测控和便携测控应用上的空白&#xff0c;在军工国防、航空航天、兵器电子、船舶舰载等各个领域的外场测控场合和科学试验研究场合都有广泛的应用。由于PXI便携式测控系统…...

编程日记 2023/12/17 7:53:27

ES6 面试题 | 12.精选 ES6 面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…...

编程日记 2023/12/17 7:52:26

【linux】Debian不能运行sudo的解决

一、问题&#xff1a; sudo: 没有找到有效的 sudoers 资源&#xff0c;退出 sudo: 初始化审计插件 sudoers_audit 出错 二、可用的方法&#xff1a; 出现 "sudo: 没有找到有效的 sudoers 资源&#xff0c;退出" 和 "sudo: 初始化审计插件 sudoers_audit 出错&q…...

编程日记 2023/12/17 7:50:24

讲解ThinkPHP的链式操作

数据库提供的链式操作方法&#xff0c;可以有效的提高数据存取的代码清晰度和开发效率&#xff0c;并且支持所有的CURD操作。 使用也比较简单&#xff0c;假如我们现在要查询一个User表的满足状态为1的前10条记录&#xff0c;并希望按照用户的创建时间排序 Db::table(think_u…...

编程日记 2023/12/17 7:49:23

Java技术栈 —— 微服务框架Spring Cloud —— Ruoyi-Cloud 学习（二）

RuoYi项目开发过程 一、登录功能(鉴权模块)1.1 后端部分1.1.1 什么是JWT?1.1.2 什么是Base64?为什么需要它&#xff1f;1.1.3 SpringBoot注解解析1.1.4 依赖注入和控制反转1.1.5 什么是Restful?1.1.6 Log4j 2、Logpack、SLF4j日志框架1.1.7 如何将项目打包成指定bytecode字节…...

编程日记 2023/12/17 7:46:20

如何进行软件测试和测试驱动开发（TDD）？

1. 软件测试概述 1.1 什么是软件测试&#xff1f; 软件测试是一种评估系统的过程&#xff0c;目的是发现潜在的错误或缺陷。通过对软件进行测试&#xff0c;开发者和测试人员可以确定软件是否符合预期的需求、功能是否正常运行&#xff0c;以及系统是否足够稳定和可靠。 1.2…...

编程日记 2023/12/17 7:43:17

linux 开机启动流程

1.打开电源 2.BIOS 有时间和启动方式 3.启动Systemd 其pid为1 4.挂载引导分区 /boot 5.启动各种服务 如rc.local...

编程日记 2023/12/17 7:40:15

ARM架构SUB与SUBS减法指令详解

1. ARM减法指令概述在ARM架构中&#xff0c;SUB&#xff08;减法&#xff09;和SUBS&#xff08;带标志位的减法&#xff09;是最基础的算术指令之一。这些指令用于执行寄存器值的减法操作&#xff0c;是构建更复杂算术运算和控制流程的基础。SUB指令从目标寄存器中减去一个立即…...

编程新知 2026/5/14 7:28:43

ElevenLabs IVR语音制作避坑手册（2024最新版）：92%开发者踩过的5类语音延迟/断连/语义失准陷阱

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs IVR语音制作避坑手册导论 在构建高可用、高自然度的智能语音应答&#xff08;IVR&#xff09;系统时&#xff0c;ElevenLabs 以其超拟真语音合成能力成为热门选择。然而&#xff0c;其 API …...

编程新知 2026/5/14 5:57:46

nlpcda高级配置：如何自定义词典和扩展同义词表

nlpcda高级配置&#xff1a;如何自定义词典和扩展同义词表 【免费下载链接】nlpcda 一键中文数据增强包 &#xff1b; NLP数据增强、bert数据增强、EDA&#xff1a;pip install nlpcda 项目地址: https://gitcode.com/gh_mirrors/nl/nlpcda nlpcda是一款强大的中文数据增…...

编程新知 2026/5/14 4:23:49

抖音去水印免费版哪个好用？2026实测推荐与软件对比

抖音去水印免费版哪个好用&#xff1f;2026实测推荐与软件对比 刷到一条有意思的视频想保存下来发给朋友&#xff0c;下载后却发现左上角顶着一串"用户名"水印&#xff1b;好不容易找到一段适合做素材的内容&#xff0c;画面边缘那行字怎么裁都裁不干净。这几乎是每个…...

编程新知 2026/5/14 3:47:10

工作10年才明白，这些被忽略的编程基础，才是升职加薪的关键

文章目录前言一、代码规范&#xff1a;不是“处女座洁癖”&#xff0c;是AI时代的“保命符”二、函数式编程&#xff1a;你以为“写SpringBoot用不上”&#xff0c;其实AI Agent全靠它三、命令行与系统模块&#xff1a;别让“IDE一键运行”&#xff0c;毁了你的生产效率四、经典…...

编程新知 2026/5/14 0:55:33

Midjourney提示词工程终极护城河：基于CLIP文本嵌入空间的向量对齐技术（附Python可视化调试工具）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney提示词工程终极护城河&#xff1a;基于CLIP文本嵌入空间的向量对齐技术&#xff08;附Python可视化调试工具&#xff09; 在生成式AI实践中&#xff0c;提示词质量差异常导致图像语义漂移——…...

编程新知 2026/5/13 22:34:33

别再为论文格式掉头发了！Paperxie 一键搞定 4000 + 高校排版规范

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能格式排版/文献综述/AI PPThttps://www.paperxie.cn/format/typesettinghttps://www.paperxie.cn/format/typesetting 你有没有过这种经历&#xff1a;论文内容改到导师点头&#xff0c;却栽在格式这最后一关&#xff1f;…...

编程新知 2026/5/13 22:04:03

深入Next.js App Router Playground：官方前沿特性实战指南

1. 项目定位与核心价值如果你和我一样&#xff0c;是个对 Next.js 新特性充满好奇&#xff0c;总想第一时间上手把玩的前端开发者&#xff0c;那么 Vercel 官方开源的next-app-router-playground项目&#xff0c;绝对是你不能错过的“宝藏沙盒”。这可不是一个普通的示例项目&a…...

编程新知 2026/5/13 22:02:03

Qt WebEngine实战避坑：证书管理、代理设置与高DPI适配那些事儿

Qt WebEngine实战避坑指南&#xff1a;证书管理、代理配置与高DPI适配深度解析 在跨平台桌面应用开发领域&#xff0c;Qt WebEngine作为Chromium引擎的封装实现&#xff0c;为开发者提供了强大的Web内容嵌入能力。然而在实际项目落地过程中&#xff0c;开发者常会遇到三类典型问…...

编程新知 2026/5/13 22:02:00

NextPy全栈框架：用Python构建AI智能体Web应用

1. 项目概述&#xff1a;当AI智能体遇上全栈Web开发最近在开源社区里&#xff0c;一个名为dot-agent/nextpy的项目引起了我的注意。作为一名长期在Web开发和AI应用落地之间“反复横跳”的开发者&#xff0c;我深知将AI能力&#xff0c;特别是智能体&#xff08;Agent&#xff0…...

编程新知 2026/5/13 21:16:25