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 新增的选择器进一步增强了我们对网页元素的选择和样式控制能力，能够创建出更加丰富和细腻的网页视觉效果。在实际开发中，根据不同的需求灵活运用这些选择器，可以提高代码的效率和可维护性。同时，需要注意选择器的性能问题，尽量避免使用过于复杂或性能消耗大的选择器，以确保网页的加载速度和用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/61231.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

第十二章 并行Stream流

第十二章 并行Stream流

目录 一、引言 二、获取并行Stream流的两种方式 三、并行和串行Stream流的效率对比 四、parallelStream线程安全问题 五、parallelStream背后的技术 5.1. Fork/Join框架介绍 5.2. Fork/Join原理-分治法 5.3. Fork/Join原理-工作窃取算法 5.4. Fork/Join案例 一、引言 …
阅读更多...
gitlab cicd搭建及使用笔记（二）

gitlab cicd搭建及使用笔记（二）

cicd之gitlab-runner使用要点 官方链接&#xff1a;https://docs.gitlab.com/runner/ 附历史文章链接 https://blog.csdn.net/qq_42936727/article/details/143624523?spm1001.2014.3001.5501 gitlab-runner常用命令及解释 gitlab-runner verify 容器内&#xff0c;检查注…
阅读更多...
2411rust,1.81,1.82

2411rust,1.81,1.82

1.81.0稳定版 core::error::错误 1.81稳定了核心中的Error特征,允许在#![no_std]库中使用特征.这样在相同错误特征上,可标准化更广泛的Rust生态系统,而不管库的环境. 新的排序实现 都已按新算法更新了标准库中的稳定和不稳定排序实现,从而改进了它们的运行时性能和编译时间…
阅读更多...
【EasyExcel】复杂导出操作-自定义颜色样式等（版本3.1.x）

【EasyExcel】复杂导出操作-自定义颜色样式等（版本3.1.x）

文章目录 前言一、自定义拦截器二、自定义操作1.自定义颜色1.1.样式未生效原因&#xff1a;1.2.解决方法&#xff1a; 2.合并单元格 三、复杂操作示例1.实体(使用了注解式样式)&#xff1a;2.自定义拦截器3.代码4.最终效果 前言 本文简单介绍阿里的EasyExcel的复杂导出操作&…
阅读更多...
Excel单元格中自适应填充多图

Excel单元格中自适应填充多图

实例需求&#xff1a;在Excel插入图片时&#xff0c;由于图片尺寸各不相同&#xff0c;如果希望多个图片填充指定单元格&#xff0c;依靠用户手工调整&#xff0c;不仅费时费力&#xff0c;而且很难实现完全填充。如下图中的产品图册&#xff0c;有三个图片&#xff0c;如下图所…
阅读更多...
SQL面试题——间隔连续问题

SQL面试题——间隔连续问题

间隔连续问题 某游戏公司记录的用户每日登录数据如下 +----+----------+ | id| date| +----+----------+ |1001|2021-12-12| |1001|2021-12-13| |1001|2021-12-14| |1001|2021-12-16| |1001|2021-12-19| |1001|2021-12-20| |1002|2021-12-12| |1002|2021-12-16| |1002|…
阅读更多...
【C++笔记】vector使用详解及模拟实现

【C++笔记】vector使用详解及模拟实现

前言 各位读者朋友们&#xff0c;大家好&#xff01;上期我们讲了string类的模拟实现&#xff0c;这期我们开启vector的讲解。 一.vector的介绍及使用 1.1 vector的介绍 vector的文档 使用STL的三个境界&#xff1a;能用、明理、能扩展&#xff0c;下面学习vector&#xff…
阅读更多...
LLM评测范式与方法

LLM评测范式与方法

文章目录 基础大语言模型的评测微调大语言模型的评测不同评测方法的利弊为了有效地评估大语言模型的性能，一种主流的途径就是选择不同的能力维度并且构建对应的评测任务，进而使用这些能力维度的评测任务对模型的性能进行测试与对比。可供选择的能力维度包括但不限于本书所介绍…
阅读更多...
3D Gaussian Splatting的全面理解

3D Gaussian Splatting的全面理解

1.概述 高斯泼溅是一种表示 3D 场景和渲染新视图的方法，在“用于实时辐射场渲染的 3D 高斯泼溅3d-gaussian-splatting”这篇论文中被首先提出。它可以被认为是类似 NeRF模型型的替代品，就像过去的 NeRF 一样，高斯泼溅衍生出了许多新的研究工作，研究人员选择将其用作各种用…
阅读更多...
Layui的select控件的onchange事件 无效的解决方法

Layui的select控件的onchange事件 无效的解决方法

举例&#xff1a; <select id"UserID" class"my-css" lay-filter"onchange"><option value"">请选择</option><option value"117">张三</option><option value"92">李四<…
阅读更多...
《生成式 AI》课程 第3講 CODE TASK 任务3:自定义任务的机器人

《生成式 AI》课程 第3講 CODE TASK 任务3:自定义任务的机器人

课程 《生成式 AI》课程 第3講&#xff1a;訓練不了人工智慧嗎&#xff1f;你可以訓練你自己-CSDN博客 我们希望你创建一个定制的服务机器人。 您可以想出任何您希望机器人执行的任务&#xff0c;例如&#xff0c;一个可以解决简单的数学问题的机器人0 一个机器人&#xff0c…
阅读更多...
vue包含二维码、背景图片、Logo图片和文本说明的图片生成及下载功能

vue包含二维码、背景图片、Logo图片和文本说明的图片生成及下载功能

要使用npm安装vue-qr和html2canvas这两个库 npm install vue-qr html2canvas 完整代码 可以根据实际项目需求调整&#xff0c;改成调用接口展示 <template><div><div ref"qrContainer" class"qr-container"><img class"back…
阅读更多...
使用ajax-hook修改http请求响应数据，篡改后再返回给正常的程序

使用ajax-hook修改http请求响应数据，篡改后再返回给正常的程序

import { proxy } from "ajax-hook";//正经的项目这样用 proxy({ //代理response&#xff0c; onResponse: (response, handler) > { console.log(response.config.url)//这里判断是不是自己想要监听的url console.log(response.response)//这里查看响应数据 //r…
阅读更多...
SpringBoot服务多环境配置

SpringBoot服务多环境配置

一个项目的的环境一般有三个&#xff1a;开发(dev)、测试(test)、生产(proc)&#xff0c;一般对应三套环境&#xff0c;三套配置文件。 像下面这样直接写两个配置文件是不行的。 application.ymlserver:port: 8080application-dev.ymlspring:datasource:driver-class-name: co…
阅读更多...
Oracle ADB 导入 BANK_GRAPH 的学习数据

Oracle ADB 导入 BANK_GRAPH 的学习数据

Oracle ADB 导入 BANK_GRAPH 的学习数据 1. 下载数据2. 导入数据运行 setconstraints.sql 1. 下载数据 访问 https://github.com/oracle-quickstart/oci-arch-graph/tree/main/terraform/scripts&#xff0c;下载&#xff0c; bank_accounts.csvbank_txns.csvsetconstraints.…
阅读更多...
html数据类型

html数据类型

数据类型是字面含义&#xff0c;表示各种数据的类型。在任何语言中都存在数据类型&#xff0c;因为数据是各式各样。 1.数值类型 number let a 1; let num 1.1; // 整数小数都是数字值 ​ // 数字肯定有个范围 正无穷大和负无穷大 // Infinity 正无穷大 // -Infinity 负…
阅读更多...
问：Spring MVC DispatcherServlet流程步骤梳理

问：Spring MVC DispatcherServlet流程步骤梳理

DispatcherServlet是Spring MVC框架中的核心组件&#xff0c;负责接收客户端请求并将其分发到相应的控制器进行处理。作为前端控制器&#xff08;Front Controller&#xff09;的实现&#xff0c;DispatcherServlet在整个请求处理流程中扮演着至关重要的角色。本文将探讨Dispat…
阅读更多...
【Jmeter相关】

【Jmeter相关】

Jmeter 可以作为接口测试问题&#xff0c;也会涉及到性能相关的问题 一、JMeter中用户定义的变量(User Defined Variables&#xff09;和用户参 数&#xff08;User Parameters&#xff09;的区别是什么? 在JMeter中都是用于定义和存储测试数据的方法&#xff0c;但它们有一…
阅读更多...
【GNU】gcc -O编译选项 -Og -O0 -O1 -O2 -O3 -Os

【GNU】gcc -O编译选项 -Og -O0 -O1 -O2 -O3 -Os

1、gcc -O的作用 GCC 提供的 -O 系列选项用于优化代码。这些选项可以控制编译器对代码进行优化的程度和类型&#xff0c;从而提高代码的性能、减小代码体积或优化其他特性。 2、gcc -Og -O0 -O1 -O2 -O3 -Os 2.1 gcc -Og 启用调试友好的优化&#xff0c;平衡调试器功能与性…
阅读更多...
基于深度学习的文本信息提取方法研究（pytorch python textcnn框架）

基于深度学习的文本信息提取方法研究（pytorch python textcnn框架）

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…
阅读更多...
最新文章

Copyright @ 2022~2023