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

CSS: 选择器与三大特性

article 2025/10/4 1:52:21

标签选择器

标签选择器就是选择一些HTML的不同标签，由于它们的标签需求不同，所以CSS需要设置标签去选择它们，为满足它们的需求给予对应的属性

基础选择器

标签选择器

<!DOCTYPE html>
<head><title>HOME</title><style>p{color: brown;}</style>
</head>
<body><p>Hello,World</p>
</body>
</html>

这里的<style></style>里面的p{}就是标签选择器，它选择了<p></p>标签，将<p></p>标签内的文本颜色修改为红色

演示结果

这里的Hello,World是红色的

类选择器

类选择器的存在是为了差异化每个选择器标签，它的基本格式为

.类名{所需要的属性}

<div class="类名类名 ...">文本</div>

基本代码

<!DOCTYPE html>
<head><title>HOME</title><style>.set{color: brown;}.size{font-size: 50px;}</style>
</head>
<body><p class="set size">Hello,World</p>
</body>
</html>

演示结果

这里<p></p>的文本添加了两个类型名，分别是更改颜色和大小的类选择器

id选择器

id选择器和类选择器的使用方式是相同的，唯一的不同点在于id选择器只能引用一个类名，而类选择器可以引用多个类名

基本使用方式

#id{属性}

<div id="属性名">文本内容</div>

代码演示

<!DOCTYPE html>
<head><title>HOME</title><style>#set{color: brown;font-size: 50px;}</style>
</head>
<body><div id="set">Hello,World</div>
</body>
</html>

演示结果

通配选择器

通配选择器格式

*{属性}

通配选择器会对所有文本生效

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>*{color:aqua;font-size: 50px;}</style>
</head>
<body><div>Hello,World</div>
</body>
</html>

演示结果

CSS复合选择器

复合选择器是由基础选择器构成的，当我们的代码非常庞大时，复合选择器可以用来更准确的定位某个标签，将它的属性改写

后代选择器

后代选择器是由两个父子选择器构成的，当标签的class既满足父标签又满足子标签那么它的属性才会被后代选择器修改

基本结构

.father son{}

我们来演示一下

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>.father span{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div class="father"><span>Ni Hao</span><p><span>Hello,World;</span></p></div>
</body>
</html>

演示结果

我们可以得知当文本满足后代选择器的两个先后条件时，后代选择器的更改生效，只要满足子标签在父标签的内部即可

子选择器

子选择器需要子标签是父标签里面的第一个直接标签，也就是说子标签必须要是父标签的亲儿子标签，否则不生效

语法

父亲>儿子{}

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>div>span{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div><span>Ni Hao</span><p><span>Hello,World;</span></p></div>
</body>
</html>

演示结果

我们可以看到，同样是<span></span>标签，但其中鄙视<div></div>标签的亲儿子标签不会被后代选择器选择

并集选择器

并集选择器可以在同一行定义许多个其它的复合选择器或基础选择器

语法

元素1 元素2{}

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>div,span,.father div{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div>WeChat</div><span>Ni Hao</span><p>Hello,World;</p>
</body>
</html>

演示结果

我们可以发现这个并集选择器同时选择了<span></span>和<div></div>两个标签

当然我们也可以并上子选择器和后代选择器

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>.blue span,div>span{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div><p class="blue"><span>P内的span文字标签</span><div>P内的div文字标签</div></p><span>div内的span文字标签</span></div>
</body>
</html>

演示结果

我们可以看到并集选择器同时完成了子选择器和后代选择器的功能

伪类选择器

用于给一些元素添加某种效果

链接伪类选择器

a：link，选择未被访问的链接

a：visited，选择已经被访问的链接

a：hover，选择鼠标悬停的链接

a：active，选择鼠标点击的链接

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>a{font-size: 50px;}a:link {color: rgb(165, 14, 14);}a:active {color: rgb(249, 5, 5);}a:hover {color: rgb(153, 0, 255);}a:visited {color: rgb(127, 253, 2);}</style>
</head>
<body><a href="https://www.bilibili.com/">bilibili</a>
</body>
</html>

演示结果

当我们鼠标悬停时

这里由于浏览器的安全限制我们就先不演示其它的了

：focus 伪类选择器

focus用于获取表单，focus通过获取表单得到修改表单的权限

我们来演示一下

演示代码

当我们点击这些表单的时候，这些表单便会因为选择器添加的属性而变色

CSS三大特性

层叠性

当我们由两个相同的选择器时，那么就会发生命名冲突，那么命名冲突后，编译器会怎么选择属性呢

演示代码

<html>
<head><title>Document</title><style>p{color: brown;font-size: 50px;}p{color: blue;}</style>
</head>
<body><p>Hello,World</p>
</body>
</html>

演示结果

当由两个p选择器时，后面的选择器属性会覆盖前面的，没有被覆盖的属性会继承下来，比如颜色被覆盖，但是文本大小被继承下来

继承性

在CSS中子进程会继承父进程的特性

演示代码

<html>
<head><title>Document</title><style>div{color: brown;font-size: 50px;}</style>
</head>
<body><div>your name   <p>Hello,World</p></div>
</body>
</html>

演示结果

这里的<p></p>标签继承了<div></div>标签的特性

优先级

当一个元素被多个选择器选择会出现两种情况

选择器相同，执行层优先

选择器不同，执行优先级

选择器的优先级取决于，选择器的权重

选择器	权重
从父级继承 / 通配符`*`	`0.0.0.0`
标签选择器	`0.0.0.1`
类选择器 / 伪类选择器	`0.0.1.0`
id选择器	`0.1.0.0`
行内样式`style=""`	`1.0.0.0`
`!important` 修饰	`∞`

代码演示

<html>
<head><title>Document</title><style>div{color: brown;font-size: 50px;}.father{color:black;}#son{color: blue;}</style>
</head>
<body><div class="father" id="son">Hello,World</div>
</body>
</html>

演示结果

因为id选择器权重最高，所以是蓝色

还有一个!important元素，当选择器加上它时，那么它的优先级就是最高

当有两个元素都加了!important时，那么就比较它们各自的优先级，如果它们时相同的选择器，那么就比它们那个在后面

代码演示

<html>
<head><title>Document</title><style>div{color: brown;font-size: 50px;}#son{color: blue !important;}.father{color:black !important;}</style>
</head>
<body><div class="father" id="son">Hello,World</div>
</body>
</html>

演示结果

虽然father加了!important，但是son也加了，所以最后比较的就是son和father的优先级

权重的叠加

当我们使用后代选择器或者子选择器时，便会发生权重的叠加

比如div span的权重叠加起来就是 0.0.0.1 + 0.0.0.1 = 0.0.0.2

div .father的权重 0.0.0.1 + 0.0.1.0 =0.0.1.1

.father .son的权重 0.0.1.0 + 0.0.1.0 =0.0.2.0

权重会在对应的位置叠加，但权重不会进位

代码演示

<html>
<head><title>Document</title><style>.FATHER span{color: brown;font-size: 50px;}div span{color: blue;font-size: 50px;}</style>
</head>
<body><div class="FATHER"><span>HELLO,WORLD</span></div>
</body>
</html>

演示结果

因为.FATHER + span的权重大于 div + span的权重，所以最后是.FATHER + span选择器生效

CSS: 选择器与三大特性

标签选择器标签选择器就是选择一些HTML的不同标签，由于它们的标签需求不同，所以CSS需要设置标签去选择它们，为满足它们的需求给予对应的属性基础选择器标签选择器 <!DOCTYPE html> <head><title>HOME</title>…...

编程日记 2025/9/28 6:56:06

void func(scope ref int*) {}unique(int*) a ...; assert(a !is null);unique(int*) b a; assert(a is null); assert(b !is null);func(b); // ok用live作为检查器,不必有断定了. int* a ...; int* b a; // 所有权转至b *a 3; // 不能再用a.编译器保证约束指针. live…...

编程日记 2025/8/25 18:40:48

力扣-2.两数相加

题目描述给你两个非空的链表，表示两个非负的整数。它们每位数字都是按照逆序的方式存储的，并且每个节点只能存储一位数字。请你将两个数相加，并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外，这两个数都…...

编程日记 2025/6/6 20:56:06

M0基础篇之ADC

本节课使用到的例程一、Single模式例程基本配置的解释在例程中我们只使用到了PA25这一个通道，因此我们使用的是Single这个模式，也就是我们在配置模式的时候使用的是单一转换。进行多个通道的测量我们可以使用Sequence这个模式。二、Single模式例程基…...

编程日记 2025/9/28 6:56:02

Nginx安全防护与HTTPS部署

一、安全防护与HTTPS概念一、安全防护与HTTPS概念为什么要隐藏版本号？ 当访问网站时，能从响应标头查看到server的信息，这里面就包含了是什么web应用及其版本为你提供的服务。如果不隐藏server的版本，会导致别有用心的人知晓…...

编程日记 2025/9/11 14:21:57

C语言_程序的段

在 C 语言程序中，内存通常被分为多个逻辑段，每个段存储不同类型的数据。理解这些段的结构和功能，有助于你更高效地编写、调试和优化程序。以下是 C 语言程序中主要的内存段及其特点： 1. 代码段（Text Segment）存储内容：编译后的机器指令（程序代码）。特性：只读：防止…...

编程日记 2025/8/19 18:20:33

OSPF综合实验实验报告

OSPF综合实验实验报告一、实验拓扑二、实验要求 1.R5为ISP，其上只能配置IP地址；R4作为企业边界路由器， 出口公网地址需要通过PPP协议获取，并进行chap认证 2，整个OSPF环境IP基于172.16.0.0/16划分； 3&…...

编程日记 2025/10/3 22:10:33

vue3+ant design vue + Sortable实现多级表格列拖动

1、最近遇到个需求，需使用vue3ant design vue Sortable实现多级表格的表头允许用户拖拽移动。即当用户拖拽一级表头时，其对应的子级表头及数据应同步移动，并且只允许一级非固定表头允许拖拽。 2、代码 <a-table:data-source"rowDat…...

编程日记 2025/9/28 6:55:55

基于开源链动2+1模式AI智能名片S2B2C商城小程序的分销价格管控机制研究

摘要：本文聚焦开源链动21模式AI智能名片S2B2C商城小程序在分销体系中的价格管控机制，通过解析其技术架构与商业模式，揭示平台如何通过"去中心化裂变中心化管控"双轨机制实现价格统一。研究显示，该模式通过区块链存证技术…...

编程日记 2025/9/28 6:55:51

阿里云 SLS 多云日志接入最佳实践：链路、成本与高可用性优化

作者：裘文成（翊韬） 摘要随着企业全球化业务的扩展，如何高效、经济且可靠地将分布在海外各地的应用与基础设施日志统一采集至阿里云日志服务 (SLS) 进行分析与监控，已成为关键挑战。本文聚焦于阿里云高性能日志采集…...

编程日记 2025/9/28 6:55:47

体育培训的实验室管理痛点质检LIMS如何重构体育检测价值链

在竞技体育与全民健身并行的时代背景下，体育培训机构正面临双重挑战：既要通过科学训练提升学员竞技水平，又需严格把控运动安全风险。作为实验室数字化管理的核心工具，质检LIMS系统凭借其标准化流程管控与智能化数据分析能力&#…...

编程日记 2025/9/28 6:55:43

第二节：Vben Admin 最新 v5.0 对接后端登录接口(上)

文章目录前言一、登录页面调整二、登录表单调整三、后端接口(Python)对接对接准备1. Flask项目介绍2. User模型创建3. 迁移模型4. Token创建5. 编写蓝图6. 注册蓝图四、测试登录总结前言这里是Vben Admin V5版本实战体验，上一节我们前端已正常运行，但是没有实现登录。本节…...

编程日记 2025/7/26 8:21:54

设计模式【cpp实现版本】

文章目录设计模式1.单例模式代码设计1.饿汉式单例模式2.懒汉式单例模式 2.简单工厂和工厂方法1.简单工厂2.工厂方法 3.抽象工厂模式4.代理模式5.装饰器模式6.适配器模式7.观察者模式设计模式 1.单例模式代码设计为什么需要单例模式，在我们的项目设计中&…...

编程日记 2025/10/3 4:15:10

阿维塔汽车CAN总线数据适配技术解析与免破线数据采集实践

在智能电动汽车快速迭代的背景下，阿维塔凭借其高度集成的电子电气架构成为行业焦点。昨天我们经过实测，适配了该车型CAN总线数据适配的核心技术，从硬件接口定位、无损伤接线方案到关键动力系统数据解码进行系统性剖析，为智能诊断、…...

编程日记 2025/9/28 6:55:34

用纯HTML和CSS仿写知乎登录页面

这是知乎的官方的登录页面这是我的登录页面，使用 HTML CSS 进行编写。我觉得这是一个供前端新手练手的一个不错的小项目， 在这个系列，我将会用 HTML CSS 编写各大知名网站的登录界面，欢迎大家交流探讨。源码展示: body{ba…...

编程日记 2025/9/29 14:17:28

数据库故障排查全攻略：从实战案例到体系化解决方案

一、引言：数据库故障为何是技术人必须攻克的 "心腹大患" 在数字化时代，数据库作为企业核心数据资产的载体，其稳定性直接决定业务连续性。据 Gartner 统计，企业每小时数据库 downtime 平均损失高达 56 万美元&#xff0…...

编程日记 2025/7/17 3:18:12

MySQL如何优雅的执行DDL

一、概述在MySQL中，DDL（数据定义语言）语句用于定义和管理数据库结构，包括创建、修改和删除数据库对象（如表、索引等）。执行DDL操作时，需要谨慎处理，以避免对生产环境的稳定性和性能…...

编程日记 2025/6/12 17:05:48

Django异步任务处理方式总结

在 Django 中实现异步任务处理是优化性能和用户体验的关键。以下是几种常见的异步任务处理方式及详细说明： 1. Celery（最主流方案） 适用场景：需要可靠、分布式、复杂任务队列的项目（如定时任务、重试机制、多节点部署…...

编程日记 2025/8/29 3:44:18

类加载机制详解：双亲委派模型与打破它的方式

在复杂的 Java 系统中，类加载是最基础却常被忽略的一环。理解 JVM 的类加载机制，特别是双亲委派模型（Parent Delegation Model），是我们深入掌握热部署、插件机制、ClassLoader 隔离、ClassNotFound 错误等问题的关键。…...

编程日记 2025/9/11 4:40:19

【Redis】C++如何使用redis

文章目录 1. redis客户端2. 使用通用命令3. 使用string命令3. 使用list命令4. 使用set命令5. 使用hash命令6. 使用zset命令 1. redis客户端在前面的学习种，我们都是使用redis命令行客户端手动执行操作的；但是更多的时候，需要使用redis的api…...

编程日记 2025/9/28 6:55:26

2025年现代职业教育质量提升计划(植保无人机实训室)解决方案

一、项目背景 1.1 现代职业教育发展趋势现代职业教育正朝着多元化、技术化、智能化方向发展，以满足社会对高素质技术技能人才的迫切需求。随着科技的飞速进步，职业教育课程体系不断优化，实训教学环节的重要性愈发凸显。据教育部统计&#…...

编程日记 2025/6/10 2:43:27

考研系列-408真题计算机组成原理篇（2010-2014）

写在前面此文章是本人在备考过程中408真题计算机组成原理部分（2010年-2014年）的易错题及相应的知识点整理，后期复习也常常用到，对于知识提炼归纳理解起到了很大的作用，分享出来希望帮助到大家~ # 2010年 1.DRAM芯片的排列和编址方式这个区别于多体交叉编址：这个可以理…...

编程日记 2025/9/28 6:55:22

【BUG】‘DetDataSample‘ object has no attribute ‘_gt_sem_seg‘

问题： 使用mmdetection框架使用COCO格式训练自定义数据集时，其中模型使用HTC模型时出现如下问题： AttributeError: ‘DetDataSample’ object has no attribute ‘_gt_sem_seg’. Did you mean: ‘gt_sem_seg’? results self(**data, mode…...

编程日记 2025/8/4 6:27:15

47.电压跌落与瞬时中断干扰的防护改善措施

电压跌落与瞬时中断干扰的防护改善措施 1. 电压跌落与瞬时中断的影响机理2. 解决措施 1. 电压跌落与瞬时中断的影响机理跌落发生的常见场景如下： （1）电源插头接触不良，瞬态中断即刻恢复； （2）电…...

编程日记 2025/9/30 16:36:24

极狐Gitlab 里程碑功能介绍

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网里程碑 (BASIC ALL) 极狐GitLab 中的里程碑是一种跟踪议题和合并请求的方法，这些请求是为了在特定时间段内实现更…...

编程日记 2025/10/3 4:15:22

一次Android Fragment内存泄露的bug解决记录｜Fragment not attach to an Activity

Bug描述前些天出现了一个 bug。Activity 页面里放了一个 ViewPager2，其中的每一页是一个 Fragment。其中第一页的 Fragment 实现了一个监听器，当事件发生和首次添加到监听器管理者 listener manager 时，manager 会通知所有监听者&#xff0…...

编程日记 2025/10/3 1:50:30