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

CSS回顾-CSS选择器详解

一、引言

我来填坑啦!之前在CSS基础知识详解中介绍过,CSS 是一门基于规则的语言。是由选择器样式信息组成:选择器 {样式信息}。CSS 选择器是 CSS 规则的关键,能精准定位 HTML 元素,CSS3 新增选择器更是增强了设计能力。本篇文章就是用来总结CSS的多种选择器类型。

二、基本选择器

为了简化文章,下面所用到样式示例的页面结构以下面为主:

<h1 id="h1Title">基本选择器详解</h1>
<div class="boxClass"><span>span标签1</span><span>sapn标签2</span>
</div>

2.1 元素选择器(标签选择器)

这是最基本的选择器类型。它直接根据 HTML 标签名来选择元素。例如,span选择器会选择所有的<span>元素,为这些span元素设置样式属性。

span {color: red;font-size: 16px;
}

这种选择器的优点是简单直接,缺点是不够精确,会选中页面中所有该类型的标签。

2.2 类选择器

类选择器以.开头,后面跟着自定义的类名。在 HTML 中,通过class属性来应用类选择器。例如:

.boxClass {background-color: yellow;
}

类选择器的优点是可以复用,多个不同的元素可以应用同一个类名来共享样式。

2.3 ID 选择器

ID 选择器以#开头,后面跟着唯一的 ID 名称。在 HTML 中,通过id属性来应用 ID 选择器。需要注意的是,ID 在一个页面中应该是唯一的。例如:

#h1Title {border: 1px solid blue;
}

ID 选择器的优先级比类选择器高,但由于其唯一性,使用场景相对有限。

2.4 通配符选择器

通配符选择器用*表示,它会选择页面中的所有元素。例如:

* {margin: 0;padding: 0;
}

这种选择器在重置页面默认样式时比较常用,但由于选择范围太广,可能会影响性能,需要谨慎使用。

三、组合选择器

组合选择器基础页面结构示例:

<body><!-- 外层父元素 --><div class="parent"><div class="box1">box1标签</div><div class="box2">box2标签<span>你一点也不普通</span></div><div class="box3">box3标签</div><p>段落标签</p><div class="box4">box4标签</div></div>
</body>

3.1 后代选择器

后代选择器用于选择某个元素的后代元素。用空格隔开两个选择器,例如body div表示选择所有在<body>元素内部的<div>元素。

/* 后代选择器通过空格可以设置元素下所有特定元素后代 */
body div {/* body标签下所有div文字颜色设置为红色 */color: red;
}
.parent span {/* class选择器.parent元素下span标签文字颜色设置为粉色 */color: pink;
}

3.2 子元素选择器

子元素选择器用于选择某个元素的直接子元素。用>符号隔开两个选择器,如:

/* 子元素选择器通过>可以设置直接子元素的样式 */
body > div {/* 将body下第一层div背景颜色设置为蓝色(并不会更改.parent下的div元素背景) */background-color: blue;
}

3.3 相邻兄弟选择器

相邻兄弟选择器用于选择紧接在某个元素之后的兄弟元素。使用+符号,如:

/* 相邻兄弟选择器设置紧挨着当前元素的下一个元素样式 */
div + div {/* box2与box3背景色将变成黄色,因为他们是div元素同时上一个元素也是divbox1没有上一个元素,box4上一个是p标签所以不会改变背景颜色*/background-color: yellow;
}

3.4 通用兄弟选择器

通用兄弟选择器用于选择某个元素后面的所有兄弟元素。使用~符号,例如:

/* 通用兄弟选择器设置当前元素同级下其他特定元素样式 */
div ~ div {/* box2、box3、box4背景色变成了橙色,他们都在div.box1同级下box1之前并没有div标签所以无法选中*/background-color: orange;
}

四、属性选择器

属性选择器基础页面结构示例:

<body><!-- 外层父元素 --><div class="parent"><input type="text" class="input"><input type="password" class="password"><button class="btn save">保存</button><button class="btn reset">重置</button></div>
</body>

4.1 简单属性选择器

根据元素是否具有某个属性来选择元素。例如:

/* 简单属性选择器[属性名] */
[class] {/* 将含有class属性的元素更改背景色 */background-color: aqua;
}

4.2 属性值完全匹配选择器

要求属性值完全匹配指定的值。例如:

/* 属性值完全匹配选择器,完全匹配属性名与属性值 */
[class="input"] {background-color: bisque;
}
[type="password"] {background-color: green;
}

4.3 部分属性值匹配选择器

  • 包含匹配:使用*符号,如[class*="btn"]会选择class属性值中包含btn的元素。
  • 开头匹配:使用^符号,如[href^="https://"]会选择href属性值以https://开头的元素。
  • 结尾匹配:使用$符号,如[src$=".jpg"]会选择src属性值以.jpg结尾的元素。
/* 部分属性值匹配选择器,根据匹配规则选择特定元素 */
/* 1.包含匹配*:包含特定属性值将会被选中 */
[class*="s"] {/* 两个button按钮将会更改背景颜色,他们class属性中都包含s */background-color: red;
}
/* 2.开头匹配^:包含特定属性值开头将会被选中 */
[class^="p"] {/* 父元素parent和input的password会被设置背景色 */background-color: pink;
}
input[class^="p"] {/* 只有input的password会更改背景色 */background-color: skyblue;
}
/* 3.结尾匹配$:包含特定属性值结尾将会被选中 */
div [class$="t"] {/* div的后代中input和重置按钮会被设置背景色 */background-color: pink;
}
div input[class$="t"] {/* div的后代中只有input会更改背景色 */background-color: skyblue;
}

4.4 多个属性选择器

可以同时根据多个属性来选择元素。例如:

/* 4.多个属性嵌套:可以同时写多个属性匹配值 */
[class*="b"][class$="e"] {/* 满足class属性值由b开头e结尾只有保存按钮 */background-color: gray;
}

五、伪类选择器

5.1 链接伪类

  • :link:用于选择未被访问的链接。
  • :visited:用于选择已被访问的链接。
a:link {color: blue;
}
a:visited {color: purple;
}

5.2 用户操作伪类

  • :hover:当鼠标悬停在元素上时应用样式。
  • :active:当元素被激活(如点击鼠标左键按下未松开时)时应用样式。
button:hover {background-color: lightgray;
}
button:active {background-color: gray;
}

5.3 目标伪类(:target)

用于选择当前活动的锚点元素,即 URL 中带有#片段标识符所指向的元素。例如,当点击一个指向#section1的链接时,#section1元素可以通过:target伪类来添加样式。

#section1:target {background-color: yellow;
}

5.4 语言伪类(:lang())

根据元素的语言属性来选择元素。例如,:lang(en)会选择lang属性值为en的元素。

:lang(en) {quotes: '"' '"';
}

5.5 CSS3 新增伪类选择器

5.5.1 结构伪类

页面结构示例:

  <div id="flat"><h3>结构类型<i>伪类</i></h3><div>这是第1个盒子</div><div>这是第2个盒子</div><p>这是第3个盒子</p><div>这是第4个盒子</div><p>这是第5个盒子</p><div>这是第6个盒子</div></div>
  • :first-child:选择某个元素的第一个子元素。例如,p:first-child会选择作为父元素第一个子元素的<p>元素。
  • :last-child:选择某个元素的最后一个子元素。
  • :nth-child(n):选择某个元素的第n个子元素,可以是具体数字、公式(如2n表示偶数位置的子元素,2n + 1表示奇数位置的子元素)。
  • :nth-of-type(n):与:nth-child(n)类似,但从最后一个子元素开始计数。
  • :nth-child(n):选择同类型的第n个子元素。例如,p:nth - of - type(2)选择父元素下第二个<p>类型的子元素。
  • :nth-last-of-type(n):从最后一个同类型子元素开始计数选择第n个。
  • :only-child:选择父元素中唯一的子元素。
/* :first-child 选择flat下第一个div元素*/
#flat div:first-child {/* 不生效,因为flat下第一个元素不是div */background-color: red;
}
/* :last-child 选择flat下最后一个div元素*/
#flat div:last-child {background-color: red;
}
/* :nth-child(2n) 从前往后选择flat下偶数元素设置样式 */
#flat div:nth-child(2n) {/* 注意:会在同一级下找偶数元素如果不是div标签则不会更改 *//* 所以只有盒子1变色 */background-color: pink;
}
/* :nth-last-child(2n) 从后往前选择flat下偶数元素设置样式 */
#flat div:nth-last-child(2n) {/* 注意:会在同一级下找偶数元素如果不是div标签则不会更改 *//* 所以只有盒子1变色 */background-color: skyblue;
}
/* :nth-of-type(2n) 从前往后选择flat下所有div元素偶数元素设置样式 */
#flat div:nth-of-type(2n) {/* 注意:会把同一级div进行筛选,不会受其他元素印象 *//* 所以2、6会更改背景颜色 */background-color: pink;
}
/* :nth-last-of-type(2n) 从后往前选择flat下所有div元素偶数元素设置样式 */
#flat div:nth-last-of-type(2n) {/* 注意:会把同一级div进行筛选,不会受其他元素印象 *//* 所以4、1会更改背景颜色 */background-color: skyblue;
}
/* :only-child选择父元素中唯一的子元素 */
#flat h3:only-child {/* 不生效h3同级下有其他标签,不满足条件 */color: red;
}
#flat h3>i:only-child {/* 生效h3下只有i标签 */color: red;
}
5.5.2 否定伪类(:not())

用于排除某些元素。例如,:not(p)会选择除了<p>元素之外的所有元素。

div:not(.special) {color: red;
}
5.5.3 表单相关伪类
  • :enabled:选择所有可用的表单元素。
  • :disabled:选择所有禁用的表单元素。
  • :checked:选择所有被选中的单选框或复选框。
  • :indeterminate:选择状态不确定的表单元素(如部分浏览器中未完全选中的复选框组)。
input:enabled {background-color: white;
}
input:disabled {background-color: red;
}

六、伪元素选择器

6.1 ::before 和 ::after

这两个伪元素用于在元素内容之前或之后插入生成内容。例如,可以用来添加装饰性的图标或文本。

p::before {content: "前缀 ";color: green;
}
p::after {content: " 后缀";color: green;
}

6.2 ::first-letter 和 ::first-line

  • ::first-letter:用于选择元素内容的第一个字母,可以对其设置独特的样式,常用于首字下沉效果。
  • ::first-line:用于选择元素内容的第一行,可对其进行单独的样式设置。
p::first-letter {font-size: 200%;color: red;
}
p::first-line {font-style: italic;
}

6.3 CSS3 新增伪元素选择器

6.3.1 ::selection

用于选择用户在网页上选中的文本内容,可以为其设置样式,如改变背景色和文本颜色。

::selection {background-color: lightblue;color: white;
}

七、总结

CSS 选择器为我们提供了丰富多样的方式来选择和操作 HTML 元素,从基本的标签、类、ID 选择器,到复杂的组合选择器、属性选择器、伪类和伪元素选择器。特别是 CSS3 新增的选择器进一步增强了我们对网页元素的选择和样式控制能力,能够创建出更加丰富和细腻的网页视觉效果。在实际开发中,根据不同的需求灵活运用这些选择器,可以提高代码的效率和可维护性。同时,需要注意选择器的性能问题,尽量避免使用过于复杂或性能消耗大的选择器,以确保网页的加载速度和用户体验。

相关文章:

CSS回顾-CSS选择器详解

一、引言 我来填坑啦&#xff01;之前在CSS基础知识详解中介绍过&#xff0c;CSS 是一门基于规则的语言。是由选择器与样式信息组成&#xff1a;选择器 {样式信息}。CSS 选择器是 CSS 规则的关键&#xff0c;能精准定位 HTML 元素&#xff0c;CSS3 新增选择器更是增强了设计能…...

FFMPEG录像推流时遇到的问题

FFMPEG录像推流时遇到的问题&#xff0c;记录一下供大参考 1. ret avformat_write_header( ofmt_ctx, NULL ); 执行写入头后&#xff0c;所有的流的时间基都会被内部重新设置&#xff0c;所以并不你想象的把原来的时间直接入到avPACKET中就可以发送了。必须要把你每个流的P…...

【STM32+K210项目】基于K210智能人脸识别+车牌识别系统(完整工程资料源码)

运行效果: 基于K210的智能人脸与车牌识别系统工程 目录: 运行效果: 目录: 前言: 一、国内外研究现状与发展趋势 二、相关技术基础 2.1 人脸识别技术 2.2 车牌识别技术 三、智能小区门禁系统设计 3.1 系统设计方案 3.2 系统设计目标 3.3 智能小区门禁系统硬件设计 3.3.1 控…...

Unity脚本基础规则

Unity脚本基础规则 如何在Unity中创建一个脚本文件&#xff1f; 在Project窗口中的Assets目录下&#xff0c;选择合适的文件夹&#xff0c;右键&#xff0c;选择第一个Create&#xff0c;在新出现的一栏中选择C# Script&#xff0c;此时文件夹内会出现C#脚本图标&#xff0c;…...

基于AIRTEST和Jmeter、Postman的自动化测试框架

基于目前项目和团队技术升级&#xff0c;采用了UI自动化和接口自动化联动数据&#xff0c;进行相关测试活动&#xff0c;获得更好的测试质量和测试结果。...

使用 Azure OpenAI 服务对数据进行联合 SharePoint 搜索

作者&#xff1a;来自 Elastic Gustavo Llermaly 使用 Azure OpenAI 服务处理你的数据&#xff0c;并使用 Elastic 作为向量数据库。 在本文中&#xff0c;我们将探索 Azure OpenAI 服务 “On Your Data”&#xff0c;使用 Elasticsearch 作为数据源。我们将使用 Elastic Shar…...

JavaScript学习笔记 1】初识JS

目录 一、JS是什么&#xff1f; 二、JS的作用&#xff1f; 三、JS的组成 四、JS的书写位置 1. 内部JS 2. 外部JS(外部导入) 3. 内联JS 4. 练习 五、JS的注释与结束符 1. 注释 2. 结束符 3. JS该不该加分号&#xff1f; 六、JS的输入和输出语法 1. 输出语法 a. 输出在页面中 b. …...

Linux-Samba

文章目录 Samba配置服务配置 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Linux专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月18日13点20分 Samba配置 Samba是一个能让 Linux 系统应用与 Microsoft 网络通讯协议的软件&#x…...

【Java Web】JSON 以及 JSON 转换

JSON&#xff08;JavaScript Object Notation&#xff09;一种灵活、高效、轻量级的数据交换格式&#xff0c;广泛应用于各种数据交换和存储场景。 基本特点 1、简单易用&#xff1a;JSON格式非常简单&#xff0c;易于理解和使用。 2、轻量级&#xff1a;相比XML等其他数据格…...

Qt 元对象系统

Qt 元对象系统 Qt 元对象系统1. 元对象的概念2. 元对象系统的核心组件2.1 QObject2.2 Q_OBJECT 宏2.3 Meta-Object Compiler (MOC) 3. 信号与槽3.1 基本概念信号与槽的本质信号和槽的关键特征 3.2 绑定信号与槽参数解析断开连接 3.3 标准信号与槽查找标准信号与槽使用示例规则与…...

鸿蒙实战:使用隐式Want启动Ability

文章目录 1. 实战概述2. 实现步骤2.1 创建鸿蒙应用项目2.2 修改Index.ets代码2.3 创建LuzhouAbility2.4 创建Luzhou页面2.5 设置模块配置文件 3. 测试效果4. 实战总结 1. 实战概述 本次鸿蒙应用实战&#xff0c;先创建项目“ImplicitWantStartAbility”&#xff0c;接着修改In…...

go-zero(二) api语法和goctl应用

go-zero api语法和goctl应用 在实际开发中&#xff0c;我们更倾向于使用 goctl 来快速生成代码。 goctl 可以根据 api快速生成代码模板&#xff0c;包括模型、逻辑、处理器、路由等&#xff0c;大幅提高开发效率。 一、构建api demo 现在我们通过 goctl 创建一个最小化的 HT…...

java 操作Mongodb

CRUD基础操作 Springboot 操作 MongoDB 有两种方式。 第一种方式是采用 Springboot 官方推荐的 JPA 方式&#xff0c;这种操作方式&#xff0c;使用简单但是灵活性比较差。第二种方式是采用 Spring Data MongoDB 封装的 MongoDB 官方 Java 驱动 MongoTemplate 对 MongoDB 进行…...

以Java为例,实现一个简单的命令行图书管理系统,包括添加图书、删除图书、查找图书等功能。

江河湖海中的代码之旅&#xff1a;打造你的命令行图书管理系统 一、系统简介 1. Java简介 Java&#xff0c;这个编程语言界的“瑞士军刀”&#xff0c;自1995年诞生以来就以其跨平台的特性和强大的生态系统征服了无数开发者的心。想象一下&#xff0c;Java就像是一条蜿蜒曲折…...

[JavaWeb]微头条项目

完整笔记和项目代码&#xff1a; https://pan.baidu.com/s/1PZBO0mfpwDPic4Ezsk8orA?pwdwwp5 提取码: wwp5 JavaWeb-微头条项目开发 1 项目简介 1.1 业务介绍 微头条新闻发布和浏览平台,主要包含业务如下 用户功能 注册功能登录功能 头条新闻 新闻的分页浏览通过标题关键字搜…...

Linux(CentOS)安装达梦数据库 dm8

CentOS版本&#xff1a;CentOS 7&#xff0c;查看操作系统版本信息&#xff0c;请查阅 查看Linux内核版本信息 达梦数据库版本&#xff1a;dm8 一、获取 dm8 安装文件 1、下载安装文件 打开达梦官网&#xff1a;https://www.dameng.com/ 下载的文件 解压后的文件 2、上传安…...

【专题】中国企业出海洞察报告暨解码全球制胜之道报告汇总PDF洞察(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p38314 在当今全球化的浪潮中&#xff0c;中国企业的出海行动正以前所未有的规模和速度展开&#xff0c;成为全球经济舞台上的重要力量。本报告旨在对 2024 年中国企业出海情况进行深度洞察&#xff0c;涵盖多个领域和视角。 从对外投…...

[ 跨域问题 ] 前后端以及服务端 解决跨域的各种方法

这篇文章主要介绍了跨域问题&#xff0c;包括其定义、产生原因及各种解决方法。原因是浏览器安全策略限制&#xff0c;方法有 JSONP、CORS、Domain、 postMessage、Nginx配置、.NetCore配置。 前言 什么是跨域问题? 在Web应用中&#xff0c;当一个网页的脚本试图去请求另一个域…...

网络安全之信息收集-实战-2

请注意&#xff0c;本文仅供合法和授权的渗透测试使用&#xff0c;任何未经授权的活动都是违法的。 目录 7、网络空间引擎搜索 8、github源码泄露 9、端口信息 10、框架指纹识别 11、WAF识别 12、后台查找 7、网络空间引擎搜索 FOFA&#xff1a;https://fofa.info/ 360 …...

利用飞书多维表格自动发布版本

文章目录 背景尝试1&#xff0c;轮询尝试2&#xff0c;长连接 背景 博主所在的部门比较奇特&#xff0c;每个车型每周都需要发版&#xff0c;所以实际上一周会发布好几个版本。经过之前使用流水线自动发版改造之后&#xff0c;发版的成本已经大大降低了&#xff0c;具体参考&a…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...