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

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

news 2026/4/10 7:30:49

一、语法

二、创建

外部样式表

内部样式表

内联样式

三、选择器

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

mremap：用户态调用mremap后VMA的pgoff以及page会发生发生

结论先说结论： 1、执行 mremap 后，如果新的addr之前被映射过，之前映射过的page会被释放掉，新的addr先unmap掉。重新把旧addr的page重新映射到新的addr 2、VMA 确实会发生变化：如果原来的一个连续 VMA地址会被拆分…...

编程新知 2026/4/10 7:18:33

OpenClaw配置备份：千问3.5-9B模型切换无忧方案

OpenClaw配置备份：千问3.5-9B模型切换无忧方案 1. 为什么需要配置备份上周我的主力开发机突然硬盘故障，重装系统后不得不从头配置OpenClaw环境。当我面对空白的终端，回忆那些复杂的模型参数、飞书通道密钥和自定义技能时，才意识…...

编程新知 2026/4/10 6:01:04

GTE-Base-ZH镜像体验：可视化界面+API，双模式交互更便捷

GTE-Base-ZH镜像体验：可视化界面API，双模式交互更便捷 1. 模型与镜像介绍 1.1 GTE模型背景 GTE（General Text Embedding）模型是由阿里巴巴达摩院研发的文本嵌入模型系列，基于BERT框架构建。该系列模型在大规模中文和…...

编程新知 2026/4/10 4:54:12

OpenClaw更新策略：千问3.5-9B模型与框架的版本管理

OpenClaw更新策略：千问3.5-9B模型与框架的版本管理 1. 为什么需要版本管理上周我在本地部署的OpenClaw突然罢工了——前一天还能正常处理文件整理任务，第二天就频繁报错"模型响应格式异常"。排查后发现是自动更新机制将千问3.5-9B模型升级到…...

编程新知 2026/4/10 4:50:11

OpenClaw备份策略：gemma-3-12b-it自动化数据保护方案

OpenClaw备份策略：gemma-3-12b-it自动化数据保护方案 1. 为什么需要AI驱动的自动化备份？ 上个月我的移动硬盘突然罢工，导致三个月的项目文档全部丢失。这次惨痛经历让我意识到：传统备份方案存在两个致命缺陷——依赖人工记忆和缺…...

编程新知 2026/4/10 4:32:43

三菱PLC搭配雅马哈四轴机械手在线检测收料案例解析：融合CAD电气图纸、CClink与串口通讯...

三菱plc搭配四轴雅马哈机械手在线检测收料案例程序。 （包涵CAD电气图纸，plc程序，人机界面，机器人程序，BOM表）程序中应用到CClink通讯，232串口通讯，数据采集伺服定位控制。这项目有点…...

编程新知 2026/4/10 3:59:39

PRD文档模板

xxxxxx 需求规格说明书南京市xxx信息服务有限公司修订记录版本号修订日期修订人修订描述 V1.0 20190203 xxxxx 初稿一、概述 1.1需求背景说明需求背景，为什么要做该需求，主要是为了解决什么问题等背景举例：目前…...

编程新知 2026/4/10 3:15:02

嵌入式MCU菜单框架设计与优化实践

1. 项目概述"产品级MCU菜单框架"这个标题背后，隐藏着嵌入式开发中一个经典痛点——如何在资源受限的单片机上实现灵活、可维护的人机交互界面。作为一名在工业控制领域摸爬滚打多年的工程师，我见过太多项目因为前期轻视菜单设计，导…...

编程新知 2026/4/10 0:59:08

5分钟精通B站音频提取：BilibiliDown高效解决方案与实战指南

5分钟精通B站音频提取：BilibiliDown高效解决方案与实战指南【免费下载链接】BilibiliDown (GUI-多平台支持) B站哔哩哔哩视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirr…...

编程新知 2026/4/10 0:55:03

桌面端 Claw 个人微信接入指南使

1.概述在人工智能快速发展的今天，AI不再仅仅是回答问题的聊天机器人，而是正在演变为能够主动完成复杂任务的智能代理。OpenAI的Codex CLI就是这一趋势的典型代表——一个跨平台的本地软件代理，能够在用户的机器上安全高效地生成高质量的软件变…...

编程新知 2026/4/10 0:06:35

一、语法

二、创建

外部样式表

内部样式表

内联样式

三、选择器

ID选择器

类选择器

伪类选择器

<any>:hover

a:link

a:active

a:visited

属性选择器

伪元素选择器

::first-letter

::first-line

::selection

::placeholder

::before 和::after

通配选择器

标签选择器

参考资料：

相关文章：