CSS回顾-CSS选择器详解

news2024/11/20 20:57:49

一、引言

我来填坑啦！之前在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元素同时上一个元素也是div
    box1没有上一个元素，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.coloradmin.cn/o/2244249.html

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

相关文章

学习笔记024——Ubuntu 安装 Redis遇到相关问题

学习笔记024——Ubuntu 安装 Redis遇到相关问题

目录 1、更新APT存储库缓存&#xff1a; 2、apt安装Redis&#xff1a; 3、如何查看检查 Redis版本&#xff1a; 4、配置文件相关设置&#xff1a; 5、重启服务&#xff0c;配置生效&#xff1a; 6、查看服务状态&#xff1a; 1、更新APT存储库缓存&#xff1a; sudo apt…
阅读更多...
【时间之外】IT人求职和创业应知【35】-RTE三进宫

【时间之外】IT人求职和创业应知【35】-RTE三进宫

目录 新闻一&#xff1a;京东工业发布11.11战报&#xff0c;多项倍增数据体现工业经济信心提升 新闻二&#xff1a;阿里云100万核算力支撑天猫双11&#xff0c;弹性计算规模刷新纪录 新闻三&#xff1a;声网CEO赵斌&#xff1a;RTE将成为生成式AI时代AI Infra的关键部分 认知…
阅读更多...
css3中的多列布局，用于实现文字像报纸一样的布局

css3中的多列布局，用于实现文字像报纸一样的布局

作用&#xff1a;专门用于实现类似于报纸类的布局 常用的属性如下&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevic…
阅读更多...
网络基础（4）IP协议

网络基础（4）IP协议

经过之前的学习对传输协议的学习&#xff0c;对于传输协议从系统底层到应用层对于socket套接字的学习已经有了一套完整的理论。 对于网络的层状结构&#xff0c;现在已经学习到了应用层和传输层: 在之前的学习中&#xff0c;通信的双方都只考虑了双方的传输层的东西&#xff0…
阅读更多...
【图像处理识别】数据集合集！

【图像处理识别】数据集合集！

本文将为您介绍经典、热门的数据集&#xff0c;希望对您在选择适合的数据集时有所帮助。 1 CNN-ImageProc-Robotics 机器人 更新时间&#xff1a;2024-07-29 访问地址: GitHub 描述&#xff1a; 通过 CNN 和图像处理进行机器人对象识别项目侧重于集成最先进的深度学习技术和…
阅读更多...
Leetcode 快乐数

Leetcode 快乐数

算法思想&#xff1a; 这段代码的目的是判断一个正整数是否是 快乐数&#xff08;Happy Number&#xff09;。根据题目要求&#xff0c;快乐数定义如下&#xff1a; 对于一个正整数&#xff0c;不断将它每个位上的数字替换为这些数字平方和。重复这个过程&#xff0c;如果最终…
阅读更多...
探索Python PDF处理的奥秘：pdfrw库揭秘

探索Python PDF处理的奥秘：pdfrw库揭秘

文章目录 探索Python PDF处理的奥秘&#xff1a;pdfrw库揭秘1. 背景&#xff1a;为何选择pdfrw&#xff1f;2. pdfrw是什么&#xff1f;3. 如何安装pdfrw&#xff1f;4. 五个简单的库函数使用方法4.1 读取PDF信息4.2 修改PDF元数据4.3 旋转PDF页面4.4 提取PDF中的图片4.5 合并P…
阅读更多...
若点集A=B则A必能恒等变换地变为B=A这一几何常识推翻直线（平面）公理

若点集A=B则A必能恒等变换地变为B=A这一几何常识推翻直线（平面）公理

黄小宁 关键词&#xff1a;“更无理”复数 复平面z各点z的对应点z1的全体是z1面。z面平移变为z1面就使x轴⊂z面沿本身平移变为ux1轴。R可几何化为R轴&#xff0c;R轴可沿本身平移变为R′轴&#xff0c;R′轴可沿本身平移变为R″轴&#xff0c;...。直线公理和平面公理使几百年…
阅读更多...
详细分析ipvsadm负载均衡的命令

详细分析ipvsadm负载均衡的命令

目录 前言1. 基本知识2. 命令参数3. 拓展 前言 LVS四层负载均衡架构详解Lvs推荐阅读&#xff1a;添加链接描述 1. 基本知识 ipvsadm 是用于管理和配置 Linux 服务器上 IP Virtual Server (IPVS) 的工具&#xff0c;是 Linux 提供的一个负载均衡模块&#xff0c;支持多种负载…
阅读更多...
PH热榜 | 2024-11-19

PH热榜 | 2024-11-19

DevNow 是一个精简的开源技术博客项目模版&#xff0c;支持 Vercel 一键部署&#xff0c;支持评论、搜索等功能&#xff0c;欢迎大家体验。 在线预览 1. Layer 标语&#xff1a;受大脑启发的规划器 介绍&#xff1a;体验一下这款新一代的任务和项目管理系统吧&#xff01;它…
阅读更多...
哥德巴赫猜想渐行渐远

哥德巴赫猜想渐行渐远

我现在的工作&#xff0c;表明经典分析可能出了问题&#xff0c;如此则连Vinogradov的三素数定理都不成立了&#xff0c;更别说基于L-函数方程的陈氏定理“12”了。事实上即使L-函数方程成立&#xff0c;由于我指出Siegel定理不成立&#xff0c;陈景润和张益唐的工作就不成立。…
阅读更多...
【支持向量机（SVM）】：相关概念及API使用

【支持向量机（SVM）】：相关概念及API使用

文章目录 1 SVM相关概念1.1 SVM引入1.1.1 SVM思想1.1.2 SVM分类1.1.3 线性可分、线性和非线性的区分 1.2 SVM概念1.3 支持向量概念1.4 软间隔和硬间隔1.5 惩罚系数C1.6 核函数 2 SVM API使用2.1 LinearSVC API 说明2.2 鸢尾花数据集案例2.3 惩罚参数C的影响 1 SVM相关概念 1.1…
阅读更多...
GraphRAG+Ollama实现本地部署+neo4j可视化结果

GraphRAG+Ollama实现本地部署+neo4j可视化结果

GraphRAGOllama实现本地部署neo4j可视化结果 前言一、GraphRAGOllama本地部署补充说明 二、neo4j可视化GraphRAG1.windows安装neo4j2.启动neo4j服务3.进入neo4j的webui界面4.使用neo4J可视化GraphRAG索引5.neo4j不删除旧数据&#xff0c;新建一个数据库 总结 前言 最近部署微软…
阅读更多...
ssm142视频点播系统设计与实现+vue(论文+源码)_kaic

ssm142视频点播系统设计与实现+vue(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;视频点播系统设计与实现 摘 要 互联网发展到如今也近20年之久&#xff0c;视频信息一直作为互联网发展中的一个重要角色在不断更新进化。视频信息从最初的文本显示到现在集文字、视频、音频与一体&#xff0c;成为一…
阅读更多...
Python全方位技术教程

Python全方位技术教程

Python全方位技术教程 引言 Python是一种强大且易于学习的编程语言&#xff0c;因其简洁的语法和丰富的库而受到广泛欢迎。无论是数据分析、机器学习、Web开发&#xff0c;还是自动化脚本&#xff0c;Python都能胜任。本文将深入探讨Python的各个方面&#xff0c;帮助读者全面…
阅读更多...
父组件提交时让各自的子组件验证表格是否填写完整

父组件提交时让各自的子组件验证表格是否填写完整

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 父组件中有三个表格&#xff0c;表格中时输入框&#xff0c;有些输入框是必填的&#xff0c;在父组件提交时需要验证这三个表格的必填输入框中是否有没填写的。 原因分析&#xff1a; 提示&#xff1a…
阅读更多...
基于SpringBoot+RabbitMQ完成应⽤通信

基于SpringBoot+RabbitMQ完成应⽤通信

前言&#xff1a; 经过上面俩章学习&#xff0c;我们已经知道Rabbit的使用方式RabbitMQ 七种工作模式介绍_rabbitmq 工作模式-CSDN博客 RabbitMQ的工作队列在Spring Boot中实现&#xff08;详解常⽤的⼯作模式&#xff09;-CSDN博客作为⼀个消息队列,RabbitMQ也可以⽤作应⽤程…
阅读更多...
从0-1训练自己的数据集实现火焰检测

从0-1训练自己的数据集实现火焰检测

随着工业、建筑、交通等领域的快速发展，火灾作为一种常见的灾难性事件，对生命财产安全造成了严重威胁。为了提高火灾的预警能力，减少火灾损失，火焰检测技术应运而生，成为火灾监控和预防的有效手段之一。 传统的火灾检测方法，如烟雾探测器、温度传感器等，存在响应时间慢…
阅读更多...
计算机网络 （3）计算机网络的性能

计算机网络 （3）计算机网络的性能

一、计算机网络性能指标 速率&#xff1a; 速率是计算机网络中最重要的性能指标之一&#xff0c;它指的是数据的传送速率&#xff0c;也称为数据率&#xff08;Data Rate&#xff09;或比特率&#xff08;Bit Rate&#xff09;。速率的单位是比特/秒&#xff08;bit/s&#xff…
阅读更多...
豆包MarsCode

豆包MarsCode

#豆包MarsCode上新workspace# 1. 首先&#xff0c;个人所写的代码&#xff0c;会提交到gitee或者阿里的云效仓库&#xff0c;但是想在数据仓库导入的时候&#xff0c;只有github的仓库&#xff0c;希望可以加入国内的数据仓库 2. 加载不流畅&#xff0c;在使用网页版的时候&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023