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

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

news 2025/9/18 23:40:09

一、语法

二、创建

外部样式表

内部样式表

内联样式

三、选择器

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。但是&#…...

编程新知 2025/9/17 17:23:07

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略背景Solution --- 分表背景使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...

编程新知 2025/9/11 12:54:52

JUC笔记(上)-复习涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/8/22 3:28:52

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/8/24 22:00:49