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

CSS：语法、样式表、选择器

news 2025/6/16 21:43:45

一、语法

二、创建

外部样式表

内部样式表

内联样式

三、选择器

ID选择器

类选择器

伪类选择器

:hover

a:link

a:active

a:visited

属性选择器

伪元素选择器

::first-letter

::first-line

::selection

::placeholder

::before 和::after

通配选择器

标签选择器

参考资料：

一、语法

由选择器和多条声明构成，一条声明由属性和值构成。

二、创建

外部样式表

使用link元素链接外部样式表，外部样式表是一个以.css结尾的文件。

<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

使用style元素将CSS语言括起来，定义在头文件上。

<head>
<style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

使用元素内部使用style属性编写CSS样式表，定义在元素上。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

注意：内联样式 > 内部样式表 > 外部样式表 > 浏览器样式表

三、选择器

ID选择器

以#开头，后面跟着ID名称，因为ID在HTML里具有唯一性，具体效果针对单一ID名称相同元素。例如：针对以下元素。

HTML代码
<p id="para1">这是一个段落。</p>

CSS代码
#para1
{text-align:center;color:red;
}

类选择器

以.开头，后面跟着类名称，类名称不具有唯一性，对一类的元素进行同样的CSS渲染，如果要特指类内的某一元素标签，则空格后跟元素标签。

HTML代码

<div class="content-class"></div>

CSS代码


.content-class {color: blue;
}
/*匹配类*/.content-class div{color: blue;
}
/*匹配content-class类中的div标签*/

伪类选择器

伪类是用于指定所选元素的特殊状态。不同的元素有着不同的伪类。伪类由冒号后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数。附上了伪类的元素被定义为锚元素（例如，button:hover 中的 button）。它与一些用户交互有关，某些并不是直接的显现。以下是常见元素的伪类使用。

<any>:hover

鼠标悬浮在元素上，可用于所有元素

a:hover{background-color:yellow;
}
button:hover{background-color:yellow；
}

a:link

设置了未访问过的页面链接样式，可用于a元素

a:link
{background-color:yellow;
}

a:active

设置点击链接后按下的样式，短暂时刻，可用于a元素

注意：为了产生预期的效果，在CSS定义中，:active必须位于:hover之后！

a:active
{background-color:yellow;
}

a:visited

设置访问过的页面链接的样式，可用于a元素

a:visited
{background-color:yellow;
}

属性选择器

CSS 属性选择器匹配那些具有特定属性或属性值的元素。

/* 存在 title 属性的 <a> 元素 */
a[title] {color: purple;
}/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{color: green;
}

伪元素选择器

伪元素选择器用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容等等。

注意：一个基础选择器只能附加搭配一个伪元素

选择器，它与伪类选择器的区别是有两个冒号:: 。

常见伪元素选择器

::first-letter

选中块级元素第一行的第一个字母，也就是说块级元素第一行为文字可使用。

div::first-letter {font-size: 30px;color: orange;
}

::first-line

选中块级元素第一行，也就是说块级元素第一行为文字可使用。

div::first-line {font-size: 20px;color: red;
}

::selection

使用鼠标或其他选择设备选中的部分进行样式渲染。

/* 选中的文字颜色会变为红色，背景色为天蓝色 */
div::selection {color: red;background-color: skyblue;
}

::placeholder

它作用于<input>或<textarea>元素中的占位文本。

/* 文本字体为橙色，切背景为天蓝色 */
input::placeholder {color: orange;background-color: skyblue;
}

::before 和::after

before会在选中元素之前添加一个伪元素，而after会在选中元素之后，添加一个伪元素。通过 content属性来为一个元素添加修饰性的内容。

注意： ::before 和::after必须要包含content属性

HTML代码

 <div class="item"><div></div>
</div>

CSS代码：&指向父元素也就是包裹它的元素本身，它也叫父占位符。

.item div{position: relative;border: 1px solid #03A9F3;&::before,&::after {content: "";position: absolute;width: 20px;height: 20px;transition: .3s ease-in-out;}&::before {top: -5px;left: -5px;border-top: 1px solid var(--borderColor);border-left: 1px solid var(--borderColor);}&::after {right: -5px;bottom: -5px;border-bottom: 1px solid var(--borderColor);border-right: 1px solid var(--borderColor);}&:hover::before,&:hover::after {width: calc(100% + 9px);height: calc(100% + 9px);}
}

通配选择器

要使所有元素满足一个样式，可以使用通配选择器*

CSS代码
*{margin:0; padding:0;
}

标签选择器

针对HTML的标签元素，具有和类选择器差不多的效果，可以多个属于同标签元素进行渲染，还可以跟类选择器搭配使用，例如：div.fruit表示所有div标签里的类值为fruit的。

CSS代码
div {color: grey;
}

参考资料：

CSS 伪类 | 菜鸟教程

CSS基础之伪元素选择器-CSDN博客

CSS：语法、样式表、选择器

目录一、语法二、创建外部样式表内部样式表内联样式三、选择器 ID选择器类选择器伪类选择器 :hover a:link a:active a:visited 属性选择器伪元素选择器 ::first-letter ::first-line ::selection ::placeholder ::before 和::after 通配选择器标…...

编程日记 2025/1/21 10:39:27

python轻量级框架-flask

简述 Flask 是 Python 生态圈中一个基于 Python 的Web 框架。其轻量、模块化和易于扩展的特点导致其被广泛使用，适合快速开发 Web 应用以及构建小型到中型项目。它提供了开发 Web 应用最基础的工具和组件。之所以称为微框架，是因为它与一些大型 Web 框架…...

编程日记 2025/1/21 10:34:21

SQL和MySQL以及DAX的日期表生成？数字型日期？将生成的日期表插入到临时表或者实体表中

几种生成日期表的方法如何用SQL语句生成日期表呢？ 如何用MySQL语句生成日期表呢？ 如何用DAX语句生成日期表呢？ 1. MySQL生成日期表 1.1 日期格式：yyyy-MM-dd 字符型 2024-01-02 -- 生成日期表 WITH RECURSIVE temp_dateTable …...

编程日记 2025/1/21 10:24:10

文件下载时利用redis的队列模式顺序下载文件，防止多文件任务下载导致OOM

1、controller层控制 Resourceprivate RedissonClient redissonClient;Slf4j Service public class CustomerSettlementExportServiceImpl implements ICustomerSettlementExportService { /*** 文件加入队列顺序导出** param pubFileExportList 参数* return 结果*/public Aja…...

编程日记 2025/1/21 10:20:05

第13章：Python TDD完善货币加法运算（二）

写在前面这本书是我们老板推荐过的，我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后，我突然思考，对于测试开发工程师来说，什么才更有价值呢？如何让 AI 工具更好地辅助自己写代码，或许…...

编程日记 2025/1/21 10:19:04

两份PDF文档，如何比对差异，快速定位不同之处？

PDF文档比对是通过专门的工具或软件，自动检测两个PDF文件之间的差异，并以可视化的方式展示出来。这些差异可能包括文本内容的修改、图像的变化、表格数据的调整、格式的改变等。比对工具通常会标记出新增、删除或修改的部分，帮助用户快速定位…...

编程日记 2025/1/21 10:13:55

ESP-Skainet语音唤醒技术，设备高效语音识别方案，个性化交互应用

在当今数字化、智能化飞速发展的时代，物联网（IoT）与人工智能（AI）的深度融合正在重塑我们的生活和工作方式。在智能家居的生态系统中，语音唤醒技术不仅能够为用户提供个性化的服务，还能通过定制…...

编程日记 2025/1/21 10:02:41

地图：nuxt3高德地图简单使用 / nuxt2 + amap

一、官方网站 JS API 安全密钥使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API 二、使用 2.1、创建应用 2.2、添加key，得到key值 2.3、nuxt3项目引入amap 2.4、pages/map.vue <template><div class"container"><div id"map-co…...

编程日记 2025/1/21 10:01:40

走进DevOps：让开发与运维齐头并进

引言：开发与运维的“世纪和解” 还记得那些年，开发人员总是埋头写代码，然后甩手交给运维去部署，仿佛是把热山芋扔给别人。而运维呢，总是默默承受着系统崩溃、服务停机的风险，直到某一天他们终于忍不住咆哮&…...

编程日记 2025/1/21 9:58:36

力扣动态规划-5【算法学习day.99】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向（例如想要掌握基础用法，该刷哪些题？建议灵神的题单和代码随想录）和记录自己的学习过程，我的解析也不会做的非常详细，只会提供思路和一些关…...

编程日记 2025/1/21 9:56:33

LLM(3) : 浏览器录制16K的音频并上传到后端

可被阿里云[qwen-audio-asr]大模型识别 HTML <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>录音并上传</title></head><body><button id"recordButton">开始/停…...

编程日记 2025/1/21 9:54:24

PyTorch使用教程(13)-一文搞定模型的可视化和训练过程监控

一、简介在现代深度学习的研究和开发中，模型的可视化和监控是不可或缺的一部分。PyTorch，作为一个流行的深度学习框架，通过其丰富的生态系统提供了多种工具来满足这一需求。其中，torch.utils.tensorboard 是一个强大的接口&…...

编程日记 2025/1/21 9:52:17

服务器日志自动上传到阿里云OSS备份

背景公司服务器磁盘空间有限，只能存近15天日志，但是有时需要查看几个月前的日志，需要将服务器日志定时备份到某个地方，需要查询的时候有地方可查。针对这个问题，想到3个解决方法： 1、买一个配置比较低…...

编程日记 2025/1/21 9:50:14

树莓派学习

飞书：https://hi06pny1nlj.feishu.cn/docx/GYsMdth7ooNlbJx8zBDcdbcPnec?fromfrom_copylink csdn：https://blog.csdn.net/qq_41685627/article/details/145250576 基础工作安装和部署 1.1 树莓派三种连接电脑的方式 https://blog.csdn.net/weixin…...

编程日记 2025/1/21 9:48:12

NestJS中实现注入多个实现了同一个接口的Service

在NestJS中有一种场景，在注入的时候需要将多个实现了同一个接口的service都注入到系统里，而NestJS中默认时没有这种注入，此时我们可以使用一个变通的provider来实现这一功能。看下面例子，假定我们有一个OSService接口&#xff0…...

编程日记 2025/1/21 9:47:10

Qt按钮美化教程

前言 Qt按钮美化主要有三种方式：QSS、属性和自绘 QSS 字体大小 font-size: 18px;文字颜色 color: white;背景颜色 background-color: rgb(10,88,163); 按钮边框 border: 2px solid rgb(114,188,51);文字对齐 text-align: left;左侧内边距 padding-left: 10…...

编程日记 2025/1/21 9:45:07

基于单片机的多功能蓝牙语音智能台灯（论文+源码）

1总体方案设计通过需求分析，本设计多功能蓝牙语音智能台灯的系统框图如图2.1所示，系统架构包括主控制器STM32F103单片机、HC-06蓝牙通信模块、LU-ASR01语音识别模块、OLED液晶、LED灯、按键等器件，在使用时用户可以通过手机APP、语音识别、…...

编程日记 2025/1/21 9:42:58

第15章：Python TDD应对货币类开发变化（二）

编程日记 2025/1/21 9:41:55

算法随笔_13: 有效三角形的个数

上一篇:算法随笔_12:最短无序子数组-CSDN博客题目描述如下: 给定一个包含非负整数的数组 nums ，返回其中可以组成三角形三条边的三元组个数。示例 1: 输入: nums [2,2,3,4] 输出: 3 解释:有效的组合是: 2,3,4 (使用第一个 2) 2,3,4 (使用第二个 2) 2,2,3 算法…...

编程日记 2025/1/21 9:36:48

WSL 2 自动更新虚拟 IP 到 window hosts

window下的wsl2 开发中使用到域名映射，但是WSL2 每次启动都会被分配一个虚拟的 ip 地址，每次启动虚拟ip 都不一样，导致要频繁更改 window 的 hosts 文件，太麻烦了，所以写一个自动执行的 .sh 脚本，每次启动…...

编程日记 2025/1/21 9:29:41

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。发送模版消息： import requests da…...

编程新知 2025/6/16 17:51:02

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/6/15 11:37:06

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制指定固定的延迟级别通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/6/13 8:03:30

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/6/15 13:07:59

是否存在路径（FIFOBB算法）

题目描述一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。输入第一行两个整数，分别表示n 和 e 的值（1…...

编程新知 2025/6/15 21:35:34

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/6/16 0:38:58