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

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

news 2025/12/15 16:22:55

目录

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

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/12/15 7:07:56

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/12/9 1:33:12

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/12/15 4:22:24

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/12/9 12:17:40

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/12/9 2:36:52

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2025/12/14 5:28:06

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

编程新知 2025/12/5 20:53:04