CSS 选择器入门
一、CSS 选择器基础:快速掌握核心概念
-
什么是选择器?
CSS 选择器就像 “网页元素的遥控器”,用于定位 HTML 中的特定元素并应用样式。/* 结构:选择器 { 属性: 值; } */ p { color: red; } /* 选择所有<p>元素,文字变红 */
-
元素选择器(标签选择器)
- 直接用 HTML 标签名作为选择器(如
div
,h1
,a
)。 - 作用于页面中所有该类型的元素。
h2 { font-size: 20px; } /* 所有<h2>标题字体大小为20px */ img { border: 1px solid gray; } /* 所有图片添加边框 */
- 直接用 HTML 标签名作为选择器(如
-
类选择器(Class Selector)
- 通过元素的
class
属性匹配,可复用(一个元素可拥有多个类)。 - 命名规则:
- 必须以
.
开头(如.highlight
)。 - 只能包含字母、数字、连字符(
-
)、下划线(_
)。 - 不能以数字开头,不能包含空格。
<!-- HTML --> <p class="error-message">这是错误提示</p>
/* CSS */ .error-message { color: red; } /* 所有class="error-message"的元素变红 */ .btn-primary { background: blue; } /* 主按钮样式 */
- 必须以
- 通过元素的
-
ID 选择器
- 通过元素的
id
属性匹配,必须唯一(一个页面中不能重复)。 - 命名规则与类相似,但以
#
开头(如#header
)。
<!-- HTML --> <div id="main-content">内容区域</div>
/* CSS */ #main-content { width: 800px; } /* id="main-content"的元素宽度为800px */
- 通过元素的
-
通配符选择器(
*
)- 匹配所有元素,常用于全局样式重置。
* { margin: 0; padding: 0; } /* 所有元素的边距重置为0 */
二、组合选择器:多条件筛选元素
-
后代选择器(空格分隔)
- 选择某个元素内部的所有后代元素(无论嵌套多深)。
article p { line-height: 1.6; } /* 所有<article>内的<p>元素行高为1.6 */
-
子选择器(>`)
- 只选择某个元素的直接子元素(一级子元素)。
nav > ul { background: lightgray; } /* 导航栏(nav)的直接子元素<ul>添加背景色 */
-
相邻兄弟选择器(
+
)- 选择紧接在另一个元素后的同级元素。
h3 + p { margin-top: 10px; } /* 每个<h3>后的第一个<p>元素顶部边距为10px */
-
通用兄弟选择器(
~
)- 选择前面某个元素后的所有同级元素。
img ~ figcaption { font-style: italic; } /* 每个<img>后的所有<figcaption>变斜体 */
三、属性选择器:按元素属性筛选
通过元素的属性或属性值来选择元素。
[disabled] { opacity: 0.5; } /* 所有带disabled属性的元素透明度降低 */
a[target="_blank"] { color: purple; } /* 所有打开新窗口的链接变紫色 */
input[type="email"] { border-color: blue; } /* 邮箱输入框边框变蓝 */
四、伪类选择器(Pseudo-classes)
定义:伪类用于选择处于特定状态或位置的元素,以冒号 :
开头。
1. 动态伪类(用户交互状态)
a:hover { color: red; } /* 鼠标悬停时链接变红 */
button:active { background: blue; } /* 按钮被点击时背景变蓝 */
input:focus { outline: 2px solid green; } /* 输入框获得焦点时显示绿色边框 */
a:visited { color: purple; } /* 已访问链接变紫色 */
2. 结构伪类(位置关系)
li:first-child { font-weight: bold; } /* 第一个列表项加粗 */
li:last-child { border-bottom: none; } /* 最后一个列表项去掉下边框 */
p:nth-child(even) { background: #f0f0f0; } /* 偶数位置的段落添加浅灰色背景 */
p:nth-child(3) { color: blue; } /* 第三个段落变蓝色 */
p:nth-of-type(odd) { font-style: italic; } /* 奇数位置的<p>元素变斜体 */
3. 逻辑伪类(条件筛选)
:not(.highlight) { opacity: 0.8; } /* 非.highlight类的元素透明度降低 */
input:required { border: 1px solid red; } /* 必填字段添加红色边框 */
input:disabled { background: #eee; } /* 禁用的输入框添加灰色背景 */
4. 目标伪类(URL 锚点)
:target { background: yellow; } /* 当前URL锚点对应的元素高亮 */
五、伪元素选择器(Pseudo-elements)
定义:伪元素用于选择元素的特定部分(如首字母、内容前后插入的虚拟元素),以双冒号 ::
开头(单冒号也兼容)。
1. 内容插入伪元素
p::before {content: "▶ "; /* 在每个<p>元素前插入箭头符号 */color: red;
}p::after {content: " ✅"; /* 在每个<p>元素后插入对勾符号 */
}blockquote::before {content: open-quote; /* 插入左引号 */font-size: 2em;
}
2. 文本片段伪元素
p::first-letter {font-size: 2em; /* 段落首字母放大 */font-weight: bold;float: left;margin-right: 5px;
}p::first-line {color: blue; /* 段落首行变蓝色 */
}
3. 选中状态伪元素
::selection {background: purple; /* 用户选中文本时的背景色 */color: white; /* 用户选中文本时的文字颜色 */
}
4. 输入框占位符伪元素
input::placeholder {color: #999; /* 输入框占位文本变灰色 */font-style: italic;
}
六、选择器优先级:解决样式冲突
当多个选择器作用于同一元素时,优先级由高到低:
- 内联样式(如
<div style="color: red">
) - ID 选择器(#id)
- 类 / 属性 / 伪类选择器(.class, [attr], :hover)
- 元素 / 伪元素选择器(p, ::before)
- 通配符(*)
记忆口诀:
- ID(最高) → Class → Element(最低),简称 ICE 原则。
- 相同优先级时,后定义的样式生效。
- !important 可强制提升优先级(但尽量避免使用)。
七、初学者常见误区
-
滥用 ID 选择器
ID 必须唯一,应优先使用类选择器实现复用。 -
过度嵌套选择器
避免深层后代选择器(如div ul li a
),优先使用类直接定位。 -
忽略继承
颜色、字体等属性会自动继承,无需为每个元素重复定义。
八、实战练习:选择器应用场景
<!-- HTML 示例 -->
<header class="site-header"><nav><ul><li><a href="#" class="active">首页</a></li><li><a href="#">产品</a></li></ul></nav>
</header>
/* CSS 选择器示例 */
.site-header { background: #333; } /* 类选择器 */
nav ul { list-style: none; } /* 后代选择器 */
nav > ul > li { display: inline-block; } /* 子选择器 */
a.active { color: white; } /* 组合类选择器 */
总结:选择器是 CSS 的基石
通过系统学习选择器,你可以精准控制网页的每一个元素。建议结合实际项目练习,加深对不同选择器的理解和运用。
相关文章:
CSS 选择器入门
一、CSS 选择器基础:快速掌握核心概念 什么是选择器? CSS 选择器就像 “网页元素的遥控器”,用于定位 HTML 中的特定元素并应用样式。 /* 结构:选择器 { 属性: 值; } */ p { color: red; } /* 选择所有<p>元素,…...
【深度学习新浪潮】如何入门人工智能?
入门人工智能(AI)需要结合数学基础、编程技能、机器学习理论和实践项目,逐步深入。以下是一个系统的学习路径,适合零基础或初学者参考: 一、打好基础:数学与编程 1. 数学基础(关键) AI的核心依赖数学,尤其是以下领域: 线性代数:向量、矩阵运算、特征分解等(用于…...
软件工程第六章-详细设计
文章目录 程序流程图PAD图N-S图(盒图)流图根据PDL创建流图把程序流程图映射到流图 程序流程图 PAD图 N-S图(盒图) 流图 根据PDL创建流图 把程序流程图映射到流图...
Profinet转Modbus TCP协议转换技术,打通能耗监控‘最后一公里’
在工业自动化领域,Profinet与Modbus TCP是两种广泛使用的通讯协议。Profinet通常用于实时性要求较高的工业控制系统,而Modbus TCP则因其简单、开放的特性广泛应用于各类设备的通信。然而,由于两者在技术规范上的差异,直接的互联互…...
C++:因子问题
【描述】 任给两个正整数N、M,求一个最小的正整数a,使得a和(M-a)都是N的因子。 【输入】 包括两个整数N、M。N不超过1,000,000。 【输出】 输出一个整数a,表示结果。如果某个案例中满足条件的正整数不存在,则在对应行输出-1 【样例…...
SAP系统的委外业务是什么?委外采购(标准委外)与工序外协的区别有哪些?
【SAP系统研究】 #SAP #委外 #外包 #代工 委外业务是很常见的业务类型。 企业生产过程中,会在自制生产之外,产生委外加工业务,也称之为外包或者代工。还有一些企业,自己只负责设计、市场等业务,而将生产加工环节交给其他公司。 一、委外产生的原因 有的企业由于环评、…...
小乌龟git中的推送账户、作者账户信息修改
文章目录 修改git文档作者信息修改git推送用户信息参考文献 修改git文档作者信息 小乌龟中的用户信息为:作者信息,并非推送用户。 上边用户信息,修改的是文件的作者信息。如果想要修改git服务中记录的推送用户信息需要修改推送用户信息。 …...
vue2.0 组件
个人简介 👨💻个人主页: 魔术师 📖学习方向: 主攻前端方向,正逐渐往全栈发展 🚴个人状态: 研发工程师,现效力于政务服务网事业 🇨🇳人生格言&…...
5月19日笔记
BGP的路由聚合 BGP(Border Gateway Protocol,边界网关协议)是互联网中用于在不同自治系统(AS)之间交换路由信息的一种协议。在BGP中,路由聚合是一种技术,它允许网络管理员通过减少路由表中冗余的…...
【SPIN】PROMELA并发编程(SPIN学习系列--3)
一、active与run:Promela的进程创建基石 在Promela语言中,**active和run**是构建并发模型的核心关键字,分别用于定义主动进程和动态创建被动进程: active proctype <进程名>() 作用:声明主动进程类型࿰…...
深入理解 Redisson 看门狗机制:保障分布式锁自动续期
在分布式系统的开发中,分布式锁是解决资源竞争、数据一致性问题的关键手段。Redisson 作为一个在 Java 领域广泛使用的 Redis 客户端框架,为我们提供了功能强大且易用的分布式锁实现。其中,看门狗(watchDog)机制更是 R…...
App 发布后才想起安全?iOS 后置混淆的实战方法与工具路线(含 Ipa Guard 应用体验)
作为一名 iOS 开发者,我们对“上线前打包”和“上线后复盘”都不会陌生。但坦白说,在忙完功能、优化、测试、提交审核这些流程之后,大多数人对“App 安全”只剩下一个念头:上线了,就算了吧。 然而,真正在 …...
k8s1.27集群部署mysql8.0双主双从
环境介绍: #节点分配 159m--->两个master,生产环境建议,一个master一个节点。 160n-->slave-0 161n-->slaves-0 #存储卷 pv-->放在节点上,没用nfs/云存储。hostpath方式存储。pv的资源分配1G,较小&#…...
C++经典库介绍
在 C 开发的漫长历程中,涌现出了许多经典的库,它们在不同的领域发挥着重要作用,极大地提升了 C 开发的效率和质量。下面为你介绍一些 C 开发中的经典库。 标准模板库(STL) STL 堪称 C 编程领域的基石,是每…...
树莓派系列教程第八弹:结合 ESP32-CAM 实现远程摄像头监控
在当今数字化时代,远程监控技术已经渗透到我们生活的方方面面。无论是家庭安防、远程办公,还是物联网设备的监控,能够随时随地查看摄像头的画面都显得尤为重要。今天,我们将带你走进一个充满创意和技术挑战的项目——利用树莓派和…...
AI人工智能写作平台:AnKo助力内容创作变革!
AI人工智能写作平台:AnKo助力内容创作变革! AI人工智能写作平台正改变内容创作方式。AnKo作为领先的AI人工智能写作平台,免费为用户提供强大创作支持。AnKo AI人工智能写作平台整合多模型技术,提升写作效率和质量。 AI人工智能写…...
学习黑客 PowerShell 详解
PowerShell 详解:管道、过滤和常用命令技术指南 🚀 作者: 海尔辛 | 发布时间: 2025-05-19 12:18:38 UTC 📋 目录 PowerShell 管道详解文本搜索与过滤结果限制与选择比较和条件操作符格式化输出对象操作与属性访问错误处理综合实例与最佳实…...
【QT】一个界面中嵌入其它界面(二)
以下是使用 QStackedWidget 实现动态切换界面的完整代码,包含详细的注释和实现步骤: 完整代码 1. 子界面类:Page1 和 Page2 首先创建两个简单的子界面类,用于嵌入到 QStackedWidget 中。 // Page1.h #ifndef PAGE1_H #define P…...
前端的面试笔记——HTMLJavaScript篇(二)前端页面性能检测
前端页面性能检测和判定是优化用户体验的核心环节,需要结合实验室数据(Lab Data)、现场数据(Field Data)和行业标准综合评估。以下是主流方法、工具及判定标准的详细解析: 一、性能检测的核心维度与指标 …...
FD+Mysql的Insert时的字段赋值乱码问题
方法一 FDQuery4.SQL.Text : INSERT INTO 信息表 (中心, 分组) values(:中心,:分组); FDQuery4.Params[0].DataType : ftWideString; //必须加这个数据类型的定义,否则会有乱码 FDQuery4.Params[1].DataType : ftWideString; //ftstring就不行,必须是…...
论坛系统(中-2)
软件开发 实现业务功能 个人中心 页面结构介绍 个人中心的页面结构分为三部分 1> 导航栏 2> 正文部分 3> 页脚部分 index.html 的页面结构 1> 导航栏 2> 正文部分 3> 页脚部分 获取用户信息 实现逻辑 ⽤⼾提交请求,服务器根据是否传⼊I…...
火山 RTC 引擎9 ----集成 appkey
一、集成 appkey 1、网易RTC 初始化过程 1)、添加头文件 实现互动直播 - 互动直播 2.0网易云信互动直播产品的基本功能包括音视频通话和连麦直播,当您成功初始化 SDK 之后,您可以简单体验本产品的基本业务流程,例如主播加入房间…...
Protobuf协议生成和使用
知识点一 利用protoc.exe编译器生成脚本文件 //1.打开cmd窗口 //2.进入protoc.exe所在文件夹(也可以直接将exe文件拖入cmd窗口中) //3.输入转换指令 //protoc.exe -I配置路径 --csharp_out输出路径 配置文件名 //注意&…...
2025年—ComfyUI_关于ComfyUI的零碎小知识
之前有个朋友问我要了一个软件安装包,我分享了网盘链接,过了会儿朋友说解压后点击安装一直提示失败,还发给我报错信息,我从没遇到过,也不知做何解,于是要了截图,看着不对劲,问其在哪…...
用 SamGeo 库实现遥感影像自动分割:从本地 TIFF 到 SHP/GeoJSON 的一站式处理(Python 脚本实现)
背景:地理空间数据处理的智能化转型与 SAM 模型的革新应用 在遥感测绘、城市规划、环境监测等领域,地理空间影像数据的自动化处理一直是提升效率的核心需求。传统的影像分割方法依赖人工标注或复杂的参数调优,难以应对海量卫星 / 无人机影像的快速分析;而栅格数据(如 Geo…...
Excel导入校验
校验监听器 /*** Excel 校验监听器* param <T>*/ public class AnalysisValidReadListener<T> extends AnalysisEventListener<T> {private static final Logger logger LoggerFactory.getLogger(AnalysisValidReadListener.class);private static final i…...
【批量图片查找】在电脑上如何根据文件名清单一次性查找多张图片并复制到指定文件夹,基于Python的解决方案
一、应用场景 这个工具适用于以下场景: 设计师需要从大量素材中筛选特定图片复制并保存摄影师需要根据文件名批量整理照片查找筛选复制电商运营人员需要从产品库中提取特定商品图片复制到指定文件夹数据分析师需要批量收集特定图片复制保存用于处理任何需要从大量图…...
湖北理元理律师事务所观察:债务服务中的“倾听者价值”
在债务纠纷解决过程中,法律专业能力与心理支持同样重要。调研显示,72%的债务人在咨询初期存在“隐瞒真实负债”“抗拒沟通”等行为,直接影响方案有效性。湖北理元理律师事务所通过服务模式创新,尝试破解这一难题。 建立信任的三大…...
GPT-4.1特点?如何使用GPT-4.1模型,GPT-4.1编码和图像理解能力实例展示
几天前,OpenAI在 API 中推出了三个新模型:GPT-4.1、GPT-4.1 mini 和 GPT-4.1 nano。这些模型的性能全面超越 GPT-4o 和 GPT-4o mini(感觉这个GPT-4.1就是GPT-4o的升级迭代版本),主要在编码和指令跟踪方面均有显著提升。还拥有更大的上下文窗口…...
网络工程师案例分析
✅ Huawei Super VLAN 通信规则总结 🌐 基本结构 Super VLAN:逻辑 VLAN,承载三层网关(VLANIF 接口)。 Sub VLAN:实际的用户 VLAN,不配置 IP,仅做二层转发。 🔒 通信规…...
tcp/ip协议
OSI参考模型 应用层:OSI最高层。确定进程之间通信性质 协议:http:80,https:443,ftp:21,telnet:23,ssh:22,smtp:25,pop3 表示层:处理流经结点的数据编码的表示方式问题,以保证一个系统应用层发出的消息可被另一系统的应用层读出,数据压缩和加…...
小红书的视频怎么保存没有水印(方法分享)
你是不是也经常在小红书上刷到超赞的旅行vlog、美妆教程或美食探店视频,想保存下来慢慢看,却发现下载后总有烦人的水印?别急!今天教你一招,3秒轻松保存无水印高清视频,简单又实用! 为什么需要无…...
RK3568解码1080P视频时遇到系统崩溃内核挂掉的解决方案
接上篇rk3568。 实际使用 rock_mpp库硬解码时,会遇到解码1080P视频整个系统卡死,内核崩溃的问题。 以下是内核崩溃的日志,下面这句是典型的内核某块驱动挂掉的信息。 [ 292.469580] Unable to handle kernel NULL pointer dereference at…...
C++ —— Lambda 表达式
🎁个人主页:工藤新一 🔍系列专栏:C面向对象(类和对象篇) 🌟心中的天空之城,终会照亮我前方的路 🎉欢迎大家点赞👍评论📝收藏⭐文章 文章目录 L…...
Keepalived相关配置和高可用
目录 一. Keepalived的工作原理 二. 实现单独的心跳网卡 三. keepalive一些优化 3.1 主从之间加密验证 3.2 修改心跳线发送时间 四. 添加独立日志 五. 抢占模式,非抢占模式,延迟抢占模式 六. 单播地址和多播地址 1. 单播地址(Unicast…...
gtest 库的安装和使用
目录 介绍 安装 使用 介绍 官方文档:GoogleTest 入门 |GoogleTest 谷歌测试 gtest 库是谷歌开源的 C测试单元框架,方便我们测试程序的正确性。 安装 sudo apt-get install libgtest-dev 使用 GTest 中的断言的宏可以分为两类: • ASS…...
Python训练营打卡——DAY30(2025.5.19)
目录 模块和库的导入 一、导入官方库 1. 标准导入:导入整个库 2. 从库中导入特定项 3. 非标准导入:导入整个库 二、模块、包的定义 三、使用案例 场景1: main.py 和 circle.py 都在同一目录 场景2: main.py 和 circle.py 都在根目录的子目录 mo…...
Django框架的前端部分使用Ajax请求一
Ajax请求 目录 1.ajax请求使用 2.增加任务列表功能(只有查看和新增) 3.代码展示集合 这篇文章, 要开始讲关于ajax请求的内容了。这个和以前文章中写道的Vue框架里面的axios请求, 很相似。后端代码, 会有一些细节点, 跟前几节文章写的有些区别。 一、ajax请求使用 我们先…...
w~自动驾驶~合集3
我自己的原文哦~ https://blog.51cto.com/whaosoft/13269720 #FastOcc 推理更快、部署友好Occ算法来啦! 在自动驾驶系统当中,感知任务是整个自驾系统中至关重要的组成部分。感知任务的主要目标是使自动驾驶车辆能够理解和感知周围的环境元素&…...
LeetCode 39. 组合总和 LeetCode 40.组合总和II LeetCode 131.分割回文串
LeetCode 39. 组合总和 需要注意的是题目已经明确了数组内的元素不重复(重复的话需要执行去重操作),且元素都为正整数(如果存在0,则会出现死循环)。 思路1:暴力解法 对最后结果进行去重 每一…...
C++(2)关键字+数据类型 +数据类型输入
(1)如下关键字是 不能用于定义变量名和常量名的 !。 如int int 这样就会报错 所以注意即可 。 (2)标识符命名规则 (即变量和常量的命名规则) 最主要注意 第一个 字符必须是字母或是下划线 —…...
第二道re
题目来源:天狩CTF竞赛平台 Lihuas for 题目提示说是for循环,不管了干吧 先看加没加壳,没有,直接无脑IDAF5 代码功能概述 程序会要求用户输入一个 flag,然后将输入的每个字符与索引值进行异或运算,并将结…...
【C语言内存函数】--memcpy和memmove的使用和模拟实现,memset函数的使用,memcmp函数的使用
目录 一.memcpy的使用和模拟实现 1.1--memcpy的使用演示 1.2--memcpy的模拟实现 二.memmove的使用和模拟实现 2.1--memmove的使用演示 2.2--memmove的模拟实现 三.memset函数的使用 3.1--memset的使用演示 3.2--总结 四.memcmp函数的使用 4.1--memcmp的使用演示 4.2…...
java集合详细讲解
Java 8 集合框架详解 Java集合框架是Java中最重要、最常用的API之一,Java 8对其进行了多项增强。下面我将全面讲解Java 8中的集合框架。 一、集合框架概述 Java集合框架主要分为两大类: Collection - 单列集合 List:有序可重复Set…...
UniApp 实现的文件预览与查看功能#三方框架 #Uniapp
UniApp 实现的文件预览与查看功能 前言 在开发移动应用时,文件预览功能是一个非常常见的需求。无论是查看PDF文档、图片还是Office文件,都需要一个稳定且易用的预览解决方案。本文将详细介绍如何在UniApp中实现各类文件的预览功能,并分享一…...
用户行为日志分析的常用架构
## 1. 经典Lambda架构 Lambda架构是一种流行的大数据处理架构,特别适合用户行为日志分析场景。 ### 1.1 架构组成 Lambda架构包含三层: - **批处理层(Batch Layer)**: 存储全量数据并进行离线批处理 - **实时处理层(Speed Layer)**: 处理最新数据&…...
【VBA/word】批量替换字体大小
将5号或6号字体改为10.5号字体(循环10次) AI复制的文案问题调整 Sub Change5or6ptTo16pt_10Loops()Dim rng As RangeDim doc As DocumentDim found As BooleanDim i As IntegerDim totalChanges As LongDim targetSizes As VariantDim size As VariantSe…...
C++类与对象--3 C++对象模型和this指针
3.1 类成员分开存储 成员变量和成员函数在内存中是分开存储的只有非静态成员变量是存储在对象上的 C为空对象分配1字节的空间非空对象的大小为其内部非成员变量大小总和 静态成员不占对象空间不同对象的成员函数共享一个函数实例,不占对象空间(通过th…...
DV SSL证书管理主要有哪些功能?
在互联网信息传输高速发展的今天,用户对网站安全性的要求越来越高。SSL证书已成为网站“身份认证数据加密”的标配。其中,DV SSL证书由于其签发快速、价格低廉、使用广泛,成为大量中小型网站、个人博客、电商平台的首选。然而,选择…...
el-tree结合el-tree-transfer实现穿梭框里展示树形数据
参考文章:我把他的弹框单拉出来一个独立文件作为组件方便使用,遇到一些问题记录一下。 testComponet.vue <template><div class"per_container"><div class"per_con_left"><div class"per_con_title&q…...