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

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

news 2026/2/9 3:10:48

目录

一、语法

二、创建

外部样式表

内部样式表

内联样式

三、选择器

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 框架。其轻量、模块化和易于扩展的特点导致其被广泛使用&#xff0c;适合快速开发 Web 应用以及构建小型到中型项目。它提供了开发 Web 应用最基础的工具和组件。之所以称为微框架&#xff0c;是因为它与一些大型 Web 框架…...

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

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

几种生成日期表的方法 如何用SQL语句生成日期表呢&#xff1f; 如何用MySQL语句生成日期表呢&#xff1f; 如何用DAX语句生成日期表呢&#xff1f; 1. MySQL生成日期表 1.1 日期格式&#xff1a;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完善货币加法运算（二）

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

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

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

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

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

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

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

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

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

一、官方网站 JS API 安全密钥使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API 二、使用 2.1、创建应用 2.2、添加key&#xff0c;得到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：让开发与运维齐头并进

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

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

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

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

编程日记 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)-一文搞定模型的可视化和训练过程监控

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

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

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

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

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

树莓派学习

飞书&#xff1a;https://hi06pny1nlj.feishu.cn/docx/GYsMdth7ooNlbJx8zBDcdbcPnec?fromfrom_copylink csdn&#xff1a;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中有一种场景&#xff0c;在注入的时候需要将多个实现了同一个接口的service都注入到系统里&#xff0c;而NestJS中默认时没有这种注入&#xff0c;此时我们可以使用一个变通的provider来实现这一功能。 看下面例子&#xff0c;假定我们有一个OSService接口&#xff0…...

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

Qt按钮美化教程

前言 Qt按钮美化主要有三种方式&#xff1a;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总体方案设计 通过需求分析&#xff0c;本设计多功能蓝牙语音智能台灯的系统框图如图2.1所示&#xff0c;系统架构包括主控制器STM32F103单片机、HC-06蓝牙通信模块、LU-ASR01语音识别模块、OLED液晶、LED灯、按键等器件&#xff0c;在使用时用户可以通过手机APP、语音识别、…...

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

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

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

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

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

上一篇:算法随笔_12:最短无序子数组-CSDN博客 题目描述如下: 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 示例 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 开发中使用到 域名映射&#xff0c;但是WSL2 每次启动都会被分配一个虚拟的 ip 地址&#xff0c;每次启动虚拟ip 都不一样&#xff0c;导致要频繁 更改 window 的 hosts 文件&#xff0c;太麻烦了&#xff0c;所以写一个自动执行的 .sh 脚本&#xff0c;每次启动…...

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2026/2/8 1:53:29

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2026/2/8 20:43:00

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2026/2/8 14:57:14

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53