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

【css3】02-css3新特性之选择器篇

news 2026/5/21 11:59:49

目录

1 属性选择器

 2 结构伪类选择器

3 其他选择器

:target和::selection  

 ::first-line和::first-letter

4 伪类和伪元素的区别

伪类（Pseudo-classes）

伪元素（Pseudo-elements）

伪类和伪元素的区别

1 属性选择器

☞ 属性选择器： 

  • [属性名=值] {}
  • [属性名] {}       匹配对应的属性即可
  • [属性名^=值] {}    以值开头
  • [属性名*=值] {}    包含
  • [属性名$=值] {}       以值结束

    样例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">/* p 标签 class属性值以o结尾 *//* p[class$="o"] {color: red;} *//* p标签下匹配对应的属性class *//* p[class] {color: red;} *//* p标签下  class属性值以o开头 */p[class^="o"] {color: red;}/* p标签下  class属性值包含 */p[class*="o"] {color: red;}</style>
</head><body><div class="one">文字</div><p class="one">段落</p><p class="two">段落2</p>
</body></html>

 2 结构伪类选择器

☞ 结构伪类选择器：

  • :first-child {}     选中父元素中第一个子元素
  • :last-child {}      选中父元素中最后一个子元素
  • :nth-child(n) {}    选中父元素中正数第n个子元素
  • :nth-last-child(n) {}    选中父元素中倒数第n个子元素

样例说明：li:first-child {} 假若li不是父元素里的第一个元素，则不会生效

<head><meta charset="UTF-8"><title>Document</title><style type="text/css">/* li {color: red;}*//* 第一个子元素是li *//* li:first-child {color: red;}li:last-child {color: red;} *//* li:nth-child(3) {color: red;} *//* li:nth-last-child(3) {color: red;} */li:nth-child(odd) {color: red;}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</body>

备注：
1、n 的取值大于等于0时，n 可以设置预定义的值：

  •   odd[表示选中奇数位置的元素]  
  •   even[表示选中偶数位置的元素]

2、 n 可以是一个表达式：
             an+b的格式

3 其他选择器

☞ 其他选择器：

  •     :target          被锚链接（a标签）指向的时候会触发该选择器
  •     ::selection         当(文本...)被鼠标选中的时候显示该样式
  •     ::first-line     选中第一行
  •     ::first-letter     选中第一个字符

:target和::selection  

效果：1 是run执行后的初始页面

           2 是点击了“找第5行的p”触发了:target样式效果

           3 是鼠标选中文字，触发::selection 样式效果

 

代码：

<head><meta charset="UTF-8"><title>Document</title><style type="text/css">/* 被锚链接指向的时候会触发该选择器 */p:target {color: red;}/* 当使用鼠标选中的时候样式 */p::selection {color: red;background-color: pink;}</style>
</head><body><p>文字</p><p>文字</p><p>文字</p><p>文字</p><p id="test">文字</p><p>文字</p><p>文字</p><p>文字</p><a href="#test">找第5行的p</a>
</body>

 ::first-line和::first-letter

样例：第一行设置为红色；第一个字母设置为蓝色

代码：

<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.one {width: 200px;height: 200px;border: 1px solid red;word-break: break-all;}.one:first-line {color: red;}.one:first-letter {font-size: 50px;color: blue;}/* .one::before {content: "";width: 100px;height: 100px;background-color: pink;display: block;}*/</style>
</head>
<body><div class="one">asdfadfafdasfasfdasdfafdasfdadsfasdfafdasdfasdfasdfafdadfafdasdfajsdflkajlfkjafdlkjaslfjalkdsfjalsjfalkdsjfalsfd</div>
</body>

4 伪类和伪元素的区别

在CSS3中，伪类（Pseudo-classes）和伪元素（Pseudo-elements）是两个不同的概念，尽管它们有时候在名称和用法上可能有些相似，但它们各自有不同的目的和功能。

伪类（Pseudo-classes）

伪类用于选择处于特定状态的元素。它们以冒号（:）开头，并且用于选择页面上处于特定状态的元素，而不是基于元素的名称、类、ID或属性。例如：

  • :hover：用户悬停在元素上时的样式。
  • :active：元素被激活（如鼠标点击但尚未释放）时的样式。
  • :visited：用户已访问的链接的样式。
  • :first-child：作为其父元素的第一个子元素的样式。
  • :nth-child(n)：作为其父元素的第n个子元素的样式。
  • :odd 和 :even：用于选择列表中奇数或偶数位置的元素（与 :nth-child(odd) 和 :nth-child(even) 类似）。

伪元素（Pseudo-elements）

伪元素用于在元素的内容前后插入内容，或者选择元素的特定部分。它们也以冒号（:）开头，但紧接着是一个双冒号（::），以区分伪类和伪元素。但在CSS2.1和更早的规范中，伪元素仅使用单冒号。为了向后兼容，大多数浏览器在单冒号和双冒号之间都有很好的支持。但在CSS3中，推荐使用双冒号来明确表示伪元素。

一些常见的伪元素包括：

  • ::before：在元素的内容之前插入内容。
  • ::after：在元素的内容之后插入内容。
  • ::first-letter：选择文本块的首字母。
  • ::first-line：选择文本块的第一行。
  • ::selection：用户用鼠标或其他指针设备选择的元素部分。

伪类和伪元素的区别

  • 用途：伪类用于选择处于特定状态的元素，而伪元素用于在元素的内容前后插入内容或选择元素的特定部分。
  • 语法：虽然两者都以冒号开头，但伪元素通常使用双冒号（::），以与伪类区分。
  • 元素数量：伪类可以应用于一个或多个元素，而伪元素（如::before和::after）通常只与一个元素关联。
  • 对DOM的影响：伪类不添加新的元素到DOM树中，而伪元素则实际上在DOM树中添加了一个虚拟的元素。

相关文章：

【css3】02-css3新特性之选择器篇

目录 1 属性选择器 2 结构伪类选择器 3 其他选择器 :target和::selection ::first-line和::first-letter 4 伪类和伪元素的区别 伪类&#xff08;Pseudo-classes&#xff09; 伪元素&#xff08;Pseudo-elements&#xff09; 伪类和伪元素的区别 1 属性选择器 ☞ 属性选…...

编程日记 2024/5/28 22:22:49

修正错误的插入排序

错误版 void InsertSort(vector<int>& nums) {for (int i 0; i < nums.size()-1; i){int end i;int t nums[end 1];while (end > 0){if (nums[end1] < nums[end]) nums[end 1] nums[end];else break;--end;}nums[end 1] t;} } 无法得到正确结果。…...

编程日记 2024/5/28 22:21:48

Unity 权限 之 Android 【权限 动态申请】功能的简单封装

Unity 权限 之 Android 【权限 动态申请】功能的简单封装 目录 Unity 权限 之 Android 【权限 动态申请】功能的简单封装 一、简单介绍 二、Android 权限 动态申请 三、实现原理 四、注意事项 五、案例实现简单步骤 附录&#xff1a; 一、进一步优化 二、多个权限申请…...

编程日记 2024/5/28 22:20:47

跟进2年弄丢1.8亿，你的大客管理错在哪里？

数量并非目的之所在&#xff0c;质量才是根本之道。重视1%的超级用户&#xff0c;才是提高效率的关键所在。 ——凯文凯利 在当今的商业环境中&#xff0c;大客户已成为销售服务型企业最宝贵的资产。他们不仅贡献了企业收入的重要一环&#xff0c;…...

编程日记 2024/5/28 22:19:46

浅说线性DP（上）

前言 在说线性dp之前&#xff0c;我们先来聊一聊动态规划是啥&#xff1f; 动态规划到底是啥&#xff1f; 动态规划是普及组内容中最难的一个部分&#xff0c;也是每年几乎必考的内容。它对思维的要求极高&#xff0c;它和图论、数据结构不同的地方在于它没有一个标准的数学…...

编程日记 2024/5/28 22:18:45

leetcode题目18

四数之和 中等 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;&#xf…...

编程日记 2024/5/28 22:17:43

后端企业级开发之yaml数据序列化格式文件详解2024

yaml格式 数据格式 yaml 是一种数据序列化的格式 容易阅读 容易与脚本语言交互 以数据为核心 重数据轻格式 我们要知道他怎么书写 大小写敏感 属性层级关系使用多行描述 每行结尾使用冒号结束 使用缩进表示层级关系 同层级左侧对其 只运行使用空格 属性前面添加空格 #表…...

编程日记 2024/5/28 22:16:42

智能界面设计：数字孪生与大数据结合的美学典范

智能界面设计&#xff1a;数字孪生与大数据结合的美学典范 引言 在数字化浪潮的推动下&#xff0c;智能界面设计成为了连接用户与技术的重要桥梁。数字孪生技术与大数据的结合&#xff0c;不仅为UI设计带来了前所未有的创新机遇&#xff0c;更成为了美学与功能性融合的典范。…...

编程日记 2024/5/28 22:15:41

听说部门来了个00后测试开发，一顿操作给我整麻了

公司新来了个同事&#xff0c;听说大学是学的广告专业&#xff0c;因为喜欢IT行业就找了个培训班&#xff0c;后来在一家小公司实习半年&#xff0c;现在跳槽来我们公司。来了之后把现有项目的性能优化了一遍&#xff0c;服务器缩减一半&#xff0c;性能反而提升4倍&#xff01…...

编程日记 2024/5/28 22:14:40

Linux shell命令

cat 文件名 查看文件内容&#xff0c; tac文件名 倒着显示。 more 文件名 显示内容 less文件名 和more的功能一样&#xff0c;按上下左右键&#xff0c;按Q键结束。 head文件名&#xff0c;只显示前10行内容。 ln是一个默认创建硬链接的命令 ln 文件名 ls -i文件名…...

编程日记 2024/5/28 22:13:40

【Linux】Linux基本指令1

1.软件&#xff0c;OS&#xff0c;驱动 我们看看计算机的结构层次 1.1.操作系统 操作系统是一款做 软硬件管理 的软件 操作系统&#xff08;计算机管理控制程序&#xff09;_百度百科 (baidu.com) 操作系统&#xff08;英语&#xff1a;Operating System&#xff0c;缩写&a…...

编程日记 2024/5/28 22:12:39

重学java 49 增强for

知之俞明&#xff0c;则行之越笃&#xff1b;行之愈笃&#xff0c;则知之愈益&#xff1b; —— 24.5.28 一、基本使用 1.作用: 遍历集合或者数组 2.格式: for(元素类型 变量名:要遍历的集合名或者数组名) 变量名就是代表的每一个元素 3.快捷键: 集合名或者数组名.for package …...

编程日记 2024/5/28 22:11:37

BUUCTF靶场[Web] [极客大挑战 2019]Havefun1、[HCTF 2018]WarmUp1、[ACTF2020 新生赛]Include

[web][极客大挑战 2019]Havefun1 考点&#xff1a;前端、GET传参 点开网址&#xff0c;发现是这个界面 点击界面没有回显&#xff0c;老规矩查看源代码&#xff0c;看到以下代码 代码主要意思为&#xff1a; 用get传参&#xff0c;将所传的参数给cat&#xff0c;如果catdog…...

编程日记 2024/5/28 22:10:36

现代信号处理11_Spectral Analysis谱分析（CSDN_20240526）

谱分析与傅里叶变换 对于一个信号&#xff0c;一方面可以从时域上对其进行分析&#xff0c;另一方面也可以从频域上对其进行认识&#xff0c;对信号进行频谱分析能够帮助我们了解能量在频域上的分布。 确定性信号的能量通常是有限的&#xff0c;而平稳随机信号的能量通常是无限…...

编程日记 2024/5/28 22:09:35

C#开发上位机应用:基础与实践

C#是一种流行的面向对象编程语言&#xff0c;常用于Windows应用程序的开发。上位机应用是一种用于监控和控制设备或系统的应用程序&#xff0c;通常与下位机&#xff08;如传感器、执行器等&#xff09;进行通信。在本文中&#xff0c;我们将介绍C#开发上位机应用的基础知识和实…...

编程日记 2024/5/28 22:08:34

话术巧妙分隔沟通效果更佳看看这个小技巧

客服回复客户咨询&#xff0c;如果遇到比较复杂的问题&#xff0c;经常会有大段的文字回复&#xff0c;用聊天宝的分段符功能&#xff0c;在需要分段的地方点击右上角的“插入分隔符”&#xff0c;就可以在指定位置分段&#xff0c;实现多段发送的目的。 前言 客服回复客户咨询…...

编程日记 2024/5/28 22:07:33

【Spring】设计模式(GOF)

Spring Framework在其架构和实现中广泛使用了多种GOF&#xff08;Gang of Four&#xff09;设计模式。这些设计模式帮助Spring解决了许多常见的软件开发问题&#xff0c;提高了代码的可重用性、可维护性和可扩展性。 1、工厂模式&#xff08;Factory Pattern&#xff09; 1.1简…...

编程日记 2024/5/28 22:06:32

php抖音详情和关键词搜索api

抖音详情和关键词搜索的 API 可以通过抖音提供的开放平台来获取。以下是使用 PHP 实现的示例代码&#xff1a; 获取抖音视频详情 API&#xff1a; 获取Key和secret请移步 <?php$accessToken YOUR_ACCESS_TOKEN; // 替换为自己的 access_token $itemId YOUR_ITEM_ID; /…...

编程日记 2024/5/28 22:05:31

SOCKS 代理 和 HTTP 代理

SOCKS 代理 和 HTTP 代理 的区别 SOCKS 代理 和 HTTP 代理 都是代理服务器&#xff0c;它们充当客户端和目标服务器之间的中介&#xff0c;但它们的工作方式和应用场景有所不同。 1. SOCKS 代理&#xff1a; 工作原理&#xff1a; SOCKS 代理是一种更底层的代理&#xff0c;…...

编程日记 2024/5/28 22:04:30

【Linux】自己实现一个bash进程

bash就是命令行解释器&#xff0c;就是Linux操作系统让我们看到的&#xff0c;与用户进行交互的一种外壳&#xff08;shell&#xff09;&#xff0c;当然了bash也是一个进程&#xff0c;它有时候就是通过创建子进程来执行我们输入的命令的。这无疑就离不开我们上篇博客所说的进…...

编程日记 2024/5/28 22:03:29

从Cityscapes到遥感图像：用MMSegmentation v1.0.0搞定不同领域语义分割数据集的完整配置流程

跨领域语义分割实战&#xff1a;MMSegmentation多场景数据集配置全解析 当计算机视觉工程师需要将语义分割技术从自动驾驶领域迁移到遥感图像分析时&#xff0c;最常遇到的障碍不是模型架构的选择&#xff0c;而是数据集的适配难题。不同领域的图像在分辨率、类别分布、标注格式…...

编程新知 2026/5/21 10:25:22

如何选择最适合的许可证扫描工具：LicenseFinder与其他工具的全面对比分析

如何选择最适合的许可证扫描工具&#xff1a;LicenseFinder与其他工具的全面对比分析 【免费下载链接】LicenseFinder Find licenses for your projects dependencies. 项目地址: https://gitcode.com/gh_mirrors/li/LicenseFinder 在当今开源软件盛行的时代&#xff0c…...

编程新知 2026/5/21 9:35:05

FigmaCN中文界面本地化解决方案：解决设计师语言障碍的技术实现

FigmaCN中文界面本地化解决方案&#xff1a;解决设计师语言障碍的技术实现 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 对于中文设计师和开发团队来说&#xff0c;Figma作为一款国际…...

编程新知 2026/5/21 9:09:24

解锁AMD Ryzen潜力：SMUDebugTool硬件调试完全指南

解锁AMD Ryzen潜力&#xff1a;SMUDebugTool硬件调试完全指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gitcod…...

编程新知 2026/5/21 8:33:03

Gofile高效下载命令行工具完全指南：解锁批量下载与断点续传的终极解决方案

Gofile高效下载命令行工具完全指南&#xff1a;解锁批量下载与断点续传的终极解决方案 【免费下载链接】gofile-downloader Download files from https://gofile.io 项目地址: https://gitcode.com/gh_mirrors/go/gofile-downloader 在当今数字资源共享的时代&#xff0…...

编程新知 2026/5/21 8:26:39

HCK代码实现原理：揭秘AI辅助学术分析的核心算法

HCK代码实现原理&#xff1a;揭秘AI辅助学术分析的核心算法 【免费下载链接】sala-do-futuro-script O HCK um script de anlise acadmica assistida por IA, projetado para auxiliar estudantes na resoluo de questes de tarefas e provas da plataforma sala do futuro. …...

编程新知 2026/5/21 4:37:04

从“黑盒”到“白盒”：深入理解PHP伪协议php://input的底层机制与安全开发启示

从“黑盒”到“白盒”&#xff1a;深入理解PHP伪协议php://input的底层机制与安全开发启示 在Web安全领域&#xff0c;文件包含漏洞一直是攻击者青睐的攻击向量。而PHP伪协议php://input的巧妙利用&#xff0c;往往能让看似无害的文件包含操作演变为致命的远程代码执行漏洞。本…...

编程新知 2026/5/21 3:40:07

DeepSpeed v0.19.0 重大更新：训练稳定性、ZeRO、FPQuantizer、DeepCompile、Sequence Parallelism 全面增强，20 位贡献者带来 28 次提交

如果你正在关注 DeepSpeed 的最新版本&#xff0c;那么 v0.19.0 绝对值得重点解读。 这次更新覆盖范围非常广&#xff0c;从 版本号更新、Transpose 重构、进程组关闭卡死修复、ZeRO 相关修复、CPU offload 梯度问题修复、DeepCompile 兼容性修复、PyTorch 版本选择、FPQuantiz…...

编程新知 2026/5/21 2:55:38

ARM裸机开发：从异常处理到协作式调度器的实战指南

1. 项目概述&#xff1a;从“异常”切入&#xff0c;理解ARM裸机开发的本质如果你刚开始接触ARM嵌入式开发&#xff0c;可能会觉得“异常”这个词有点吓人&#xff0c;听起来像是程序出了什么大问题。但恰恰相反&#xff0c;在ARM裸机开发的世界里&#xff0c;“异常”是系统与…...

编程新知 2026/5/21 2:48:55

多场景互动抽奖公众号管理系统

快微摇一摇周边模块详解适配平台与交付方式 基于微擎系统开发&#xff0c;专为微信公众号设计&#xff0c;兼容认证服务号和订阅号&#xff08;订阅号需借用权限&#xff09;。通过微擎系统在线安装交付&#xff0c;无需额外技术部署。核心功能亮点 多主题模板支持普通摇一摇、…...

编程新知 2026/5/21 1:27:47