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

前端【2】html添加样式、CSS选择器

news 2026/4/1 15:09:45

一、为html添加样式的三种方法

1、内部样式

2、外部样式

3、行内样式

二、css的使用--css选择器

1、css基本选择器

元素选择器

属性选择器

id选择器

class/类选择器

通配符选择器 

2、群组选择器-多方面筛选

3、关系选择器

 后代选择器【包含选择器】

子元素选择器 

兄弟选择器

4、伪元素选择器

5、伪类选择器

结构性伪类选择器

UI 状态伪类选择器

 :not()排除选择器

​6、CSS选择器的优先级

往期文章：

前端基础---认识前端框架（html、css、js、）_前端代码结构-CSDN博客

前端【1】---HTML入门学习_html父子标签-CSDN博客

一、为html添加样式的三种方法

1、内部样式

        内部样式是将 CSS 代码直接写在 HTML 文件的 <style> 标签中，通常放在 <head> 部分，为多个组件添加同一样式

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>内部样式示例</title><!-- 内部样式 为多个组件添加同一样式--><style>h1 {color: blue;font-size: 24px;}p {color: green;font-size: 16px;}div{color: antiquewhite;background:purple;}</style>
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p><div>这是一个div块</div>
</body>
</html>

多个页面可以共享同一个 CSS 文件，减少代码冗余。

2、外部样式

        外部样式是将 CSS 代码写在一个单独的 .css 文件中，然后通过 <link> 标签将其引入到 HTML 文件中。常用，优先级最低

html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>外部样式示例</title><!-- 引入外部样式文件 --><link rel="stylesheet" href="styles.css">
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p>
</body>
</html>

 styles.css文件：

/* 外部样式 */
h1 {color: blue;font-size: 24px;
}
p {color: green;font-size: 16px;
}

3、行内样式

        行内样式是将 CSS 代码直接写在 HTML 元素的 style 属性中。行内样式优先级最高

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>行内样式示例</title>
</head>
<body><!-- 行内样式 --><h1 style="color: blue; font-size: 24px;">这是一个标题</h1><p style="color: green; font-size: 16px;">这是一个段落。</p>
</body>
</html>

二、css的使用--css选择器

1、css基本选择器

元素选择器

语法 : 标签名{} ，通过 HTML 标签名选择元素。

标签名 {属性: 值;
}
/* 选择所有 <p> 标签 */
p {color: red;font-size: 16px;
}

属性选择器

属性选择器一共有7种写法

某某[属性]

元素[属性] {样式;
}

 

某某[属性=属性值]

元素[属性="属性值"] {样式;
}

 某某[属性^=属性值]：选择属性值以指定值开头的元素。

某某[属性$=属性值]：选择属性值以指定值结尾的元素。

某某[属性*=属性值]：选择属性值包含指定值的元素。

某某[属性~=属性值]:选择属性值中包含指定单词的元素（单词以空格分隔）。

某某[属性|=属性值]:选择属性值以指定值开头或以指定值开头后跟连字符 - 的元素。

id选择器

通过元素的 id 属性选择元素，id 是唯一的，一个页面中只能有一个元素使用相同的 id。

#id名 {属性: 值;
}

示例： 

<p id="special">这是一个特殊的段落。</p>
/* 选择 id 为 special 的元素 */
#special {color: green;font-weight: bold;
}

class/类选择器

class 可以重复使用，一个元素可以有多个 class

.class名 {属性: 值;
}

示例： 

<p class="highlight">这是一个高亮段落。</p>
<p class="highlight">这是另一个高亮段落。</p>
/* 选择所有 class 为 highlight 的元素 */
.highlight {background-color: yellow;
}

通配符选择器 

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距

 *{margin: 0;  //外间距
padding: 0;  //内间距}

要是对某几个标签执行样式而非全部标签： 

/*选择器组合（满足一个条件即可） 选择器1，选择器2{} */
div,
p,
a,
.aa 
{background-color: aquamarine;
}

 

2、群组选择器-多方面筛选

通过逗号分隔多个选择器，同时为多个元素设置相同的样式

语法：

选择器1, 选择器2, 选择器3 {属性: 值;
}

示例：

/* 选择所有 h1、h2 和 p 元素 */
h1, h2, p {color: blue;
}
/* p标签里class属性为aa */
p.aa {color: #000;}

3、关系选择器

关系选择器 是 CSS 中用于根据元素之间的层级关系来选择元素的选择器。它们通过描述元素在文档结构中的位置关系（如父子关系、兄弟关系等）来实现精确的选择

 后代选择器【包含选择器】

选择某个元素的所有后代元素。（多层嵌套）

祖先元素 后代元素 {样式;
}

子元素选择器 

选择某个元素的直接子元素（仅一层嵌套）

父元素 > 子元素 {样式;
}

 

兄弟选择器

选择某个元素后面的所有兄弟元素，平级

元素1 ~ 元素2 {样式;
}

示例： 

 

/* 选择 .container 内直接子元素中 class 为 highlight 的 <p> 元素 */
.container > .highlight {font-weight: bold;
}

4、伪元素选择器

用于选择元素的特定部分（如首行、首字母等）

选择器::伪元素 {属性: 值;
}

常用伪元素：

  • ::before：在元素内容之前插入内容。

  • ::after：在元素内容之后插入内容。

  • ::first-line：选择元素的第一行。

  • ::first-letter：选择元素的第一个字母。

示例：

/* 一、首字母：：first-letter  只使用于能让元素竖着布局的标签*/
div::first-letter
{color:yellow;font-size: 40px;
}
/* 二、首行 对于英文需要自己加入空格分隔*/
div::first-line{color:yellow;font-size: 40px;}
/* 三、往前/后加东西  可以用来做一些特效*/
/* 如果不写文字用content:" " */
div::before {content: "新添加的内容";color: antiquewhite;background-color: aqua;}
div::after {content: "新添加的内容";color: antiquewhite;background-color: aqua;}

5、伪类选择器

伪类选择器 是 CSS 中用于选择元素特定状态或位置的选择器。它们以冒号（:）开头，用于匹配元素的某种状态（如鼠标悬停、焦点状态）或位置（如第一个子元素、第 n 个子元素）

<ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ul>

结构性伪类选择器

用于根据元素在文档结构中的位置选择元素。

:nth-child(n)：

  • 选择父元素下的第 n 个子元素,从前往后数。

  • n 可以是数字、表达式（如 2n+1）、关键字（odd 奇数，even 偶数）。

  • 注意：只认数字，如果类型不匹配，样式不会生效。

  • ul li:nth-child(odd) {color: blueviolet;
}

 :nth-last-child(n)：

  • 从后往前数，选择父元素下的第 n 个子元素。

  • 示例：

    ul li:nth-last-child(2) {color: blue;
}

  • :first-child：选择父元素下的第一个子元素。

  • :last-child：选择父元素下的最后一个子元素。

  • 示例

    ul li:first-child {color: red;
}
ul li:last-child {color: green;
}

:nth-of-type(n)：

  • 选择父元素下同类型的第 n 个子元素。

  • 既认数字又认类型。

  • 示例：

    ul li:nth-of-type(2) {color: blueviolet;
}

  • :first-of-type 和 :last-of-type：

    • :first-of-type：选择父元素下同类型的第一个子元素。

    • :last-of-type：选择父元素下同类型的最后一个子元素。

    • 示例

      ul li:first-of-type {color: red;
}
ul li:last-of-type {color: green;
}

UI 状态伪类选择器

用于根据元素的状态选择元素。

:hover

  • 选择鼠标悬停在元素上时的状态
  • 示例：当鼠标悬停在按钮上时，按钮背景颜色变为黄色。
/* 鼠标悬停时改变背景颜色 */
button:hover {background-color: yellow;
}

【拓展】 /* tramsition过度动画（不会突然变成某样式） */

 li{transition: all,2s,linear;}li:hover{color: aquamarine;}

  • transition 是 CSS 中用于定义过渡效果的属性。

  • all：表示所有属性都会应用过渡效果（如颜色、背景、大小等）。

  • 2s：表示过渡效果的持续时间为 2 秒。

  • linear：表示过渡效果的时间函数为线性（匀速）。

作用：

  • 当 <li> 元素的任何属性发生变化时，会以匀速的方式在 2 秒内完成过渡。

:active

  • 选择元素被激活（如鼠标点击）时的状态。
  • 示例：当用户点击按钮时，按钮背景颜色变为红色
/* 点击时改变按钮颜色 */
button:active {background-color: red;
}

:focus

  • 选择元素获得焦点时的状态（如表单输入框）
  • 示例：当用户点击输入框时，输入框的边框颜色变为蓝色
/* 输入框获得焦点时改变边框颜色 */
input:focus {border-color: blue;
}

:checked

  • 选择被选中的单选框或多选框
  • 示例：当用户选中单选框时，单选框的背景颜色变为绿色
/* 选中时改变单选框的背景颜色 */
input[type="radio"]:checked {background-color: green;
}
  • 示例：为被选中的单选框或多选框添加一个金色的阴影效果
input:checked{box-shadow: 2px 2px 2px gold;/* 加阴影---水平方向偏移量，竖直方向偏移量，模糊度，颜色 */
}

 :not()排除选择器

用于选择 不满足指定条件 的元素

元素:not(选择器) {样式;
}

  • 元素：可以是任何 HTML 元素（如 div、p、li 等）。

  • 选择器：可以是任何有效的 CSS 选择器（如类选择器 .class、ID 选择器 #id、属性选择器 [attr] 等）。

 6、CSS选择器的优先级

选择器写的越长（越准确），优先级越高【特异性越高，优先级越高】

 ID 选择器 > 类选择器 > 元素选择器

同级别长度下，CSS 按照代码顺序执行，同一样式后边的会把前面的覆盖掉，不同样式会叠加

相关文章：

前端【2】html添加样式、CSS选择器

一、为html添加样式的三种方法 1、内部样式 2、外部样式 3、行内样式 二、css的使用--css选择器 1、css基本选择器 元素选择器 属性选择器 id选择器 class/类选择器 通配符选择器 2、群组选择器-多方面筛选 3、关系选择器 后代选择器【包含选择器】 子元素选择器…...

编程日记 2025/1/17 6:31:19

Yolov8 目标检测剪枝学习记录

最近在进行YOLOv8系列的轻量化&#xff0c;目前在网络结构方面的优化已经接近极限了&#xff0c;所以想要学习一下模型剪枝是否能够进一步优化模型的性能 这里主要参考了torch-pruning的基本使用&#xff0c;v8模型剪枝&#xff0c;Jetson nano部署剪枝YOLOv8 下面只是记录一个…...

编程日记 2025/1/17 6:30:18

LeDeCo：AI自动化排版、设计、美化海报

1.简介 平面设计是一门艺术学科&#xff0c;致力于创造吸引注意力和有效传达信息的视觉内容。今天&#xff0c;创造视觉上吸引人的设计完全依赖于具有艺术创造力和技术专长的人类设计师&#xff0c;他们巧妙地整合多模态图形元素&#xff0c;这是一个复杂而耗时的过程&#xf…...

编程日记 2025/1/17 6:28:16

Flink CDC解决数据库同步，异常情况下增量、全量问题

Flink 1.11 引入了 Flink SQL CDC&#xff0c;CDC 能给我们数据和业务间能带来什么变化&#xff1f;本文由 Apache Flink PMC&#xff0c;阿里巴巴技术专家伍翀 (云邪&#xff09;分享&#xff0c;内容将从传统的数据同步方案&#xff0c;基于 Flink CDC 同步的解决方案以及更多…...

编程日记 2025/1/17 6:27:14

01、flink的原理和安装部署

flink中主要有两个进程&#xff0c;分别是JobMManager和TaskManager&#xff0c;当然了根据flink的部署和运行环境不同&#xff0c;会有一些不同&#xff0c;但是主要的功能是类似的&#xff0c;下面我会讲下聊下&#xff0c;公司用的多的部署方式&#xff0c;基于yarn集群的部…...

编程日记 2025/1/17 6:26:13

美图脱掉“复古外衣”，在AI浪潮中蜕变

"人工智能就像电力一样&#xff0c;如果你的竞争对手正在使用它&#xff0c;你也需要使用它&#xff0c;否则你就会失去竞争力"&#xff0c;斯坦福大学教授和谷歌前首席科学家安德鲁恩格尔曾这样说到。 而近日拉开序幕的消费电子风向标——科技贸易展国际消费电子展…...

编程日记 2025/1/17 6:23:10

sqlalchemy The transaction is active - has not been committed or rolled back.

连接池参考 参考&#xff1a;https://blog.csdn.net/SunJW_2017/article/details/129332393 1、因为使用了连接池&#xff0c;没有释放 2、解决方法&#xff1a; from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker, scoped_session from gree…...

编程日记 2025/1/17 6:22:09

47.数据绑定的PropertyChanged C#例子 WPF例子

[CallerMemberName] string propertyName null 这段代码中的 [CallerMemberName] 是一个特性&#xff08;Attribute&#xff09;&#xff0c;它应用于 propertyName 参数。这个特性的作用是&#xff0c;在编译时&#xff0c;如果调用 OnPropertyChanged 方法时没有显式提供 pr…...

编程日记 2025/1/17 6:20:05

网络安全 | Web安全常见漏洞和防护经验策略

关注&#xff1a;CodingTechWork 引言 OWASP (Open Web Application Security Project) Top 10是Web应用最常见的安全风险集合&#xff0c;帮助开发人员和安全专家识别和防止最严重的网络安全问题。以下是基于OWASP Top 10的Web安全防护经验策略与规则集。Web开发者必须对潜在…...

编程日记 2025/1/17 6:19:04

Agent一键安装，快速上手Zabbix监控！

目录 一、Linux操作系统部署Agent环境配置1、防火墙配置2、永久关闭selinux yum方式安装1、配置zabbix仓库2、安装agent3、配置 Zabbix-Agent 指向 Zabbix-Server4、启动agent服务 二进制包安装1、下载二进制包2、创建用户和目录及更改属主&#xff08;组&#xff09;3、解压二…...

编程日记 2025/1/17 6:17:58

Edge Scdn是什么，它如何提升网站安全性与访问速度？

随着网络攻击的日益猖獗&#xff0c;尤其是分布式拒绝服务&#xff08;DDoS&#xff09;攻击的频繁发生&#xff0c;如何保护网站的安全性并确保用户的访问体验变得极为重要。Edge Scdn&#xff08;内容分发网络&#xff09;作为一种新兴的技术方案&#xff0c;逐渐被越来越多的…...

编程日记 2025/1/17 6:16:54

ubuntu20.04 docker安装

Ubuntu | Docker DocsPost-installation steps | Docker Docs # 创建目录 sudo mkdir -p /etc/docker # 写入配置文件 sudo tee /etc/docker/daemon.json <<-EOF { "registry-mirrors": [ "https://docker-0.unsee.tech", &qu…...

编程日记 2025/1/17 6:14:51

初始C#.

一.模板 using System; using System.Collections.Generic; using System.L。inq; using System.Text; using System.Threading.Tasks;//引用命名空间 namespace First_progream//项目名或者命名空间 { internal class Program //类名 { static void Main(string[] args)…...

编程日记 2025/1/17 6:13:47

js高亮文本

高亮文本 const inputs ["这是一个普通文本&#xff0c;包含关键字测试。",<p style"font-size: 10px">这是一个<span>GVM</span> <strong>测试</strong>内容。</p>, ];const keywords ["测试", "G…...

编程日记 2025/1/17 6:12:41

解决SpringBoot 健康检测接口 actuator/health 访问一直卡着，但 actuator/info等其他接口能正常访问的问题

背景 最近在做服务迁移&#xff0c;迁移完后的新服务&#xff0c;直接将pod的配置丢到新的K8S集群中&#xff0c;健康监测一直失败 Debug思路 先看日志&#xff0c;日志显示SpringBoot已成功启动&#xff0c;按理说不应该无法访问其/actuator/health接口 拉长健康监测延时时…...

编程日记 2025/1/17 6:11:37

KVM创建ubuntu20.04虚机,部署K8S,再克隆出二份,做为Worker节点加入集群,通过Helm创建2个Pod,让它们之间通过域名互访

KVM创建ubuntu20.04虚机,部署K8S,再克隆出二份,做为Worker节点加入集群,通过Helm创建2个Pod,让它们之间通过域名互访 一.背景二.操作步骤1.安装KVMA.在BIOS中开启VT-dB.修改grub,开启iommu在/etc/default/grub 中 GRUB_CMDLINE_LINUX行 添加 intel_iommuon iommupt重新创建引导…...

编程日记 2025/1/17 6:09:30

GaussDB中的Vacuum和Analyze

GaussDB中的Vacuum和Analyze 基本概念与区别手动Vacuum和Analyze查看Vacuum和Analyze记录Autovacuum配置参数 基本概念与区别 使用VACUUM、VACUUM FULL和ANALYZE命令定期对每个表进行维护&#xff0c;主要有以下原因&#xff1a; VACUUM FULL可回收已更新或已删除的数据所占据…...

编程日记 2025/1/17 6:08:25

IvorySQL 4.2 发布

IvorySQL 4.2 已于 2025 年 1 月 13 日正式发布。新版本全面支持 PostgreSQL 17.2&#xff0c;并修复了多项 bug。 增强功能 PostgreSQL 17.1 增强功能 确保当 RLS 应用于非顶级表引用时&#xff0c;缓存的计划会标记为依赖于调用角色使 libpq 在 SSL 或 GSS 协议协商期间丢…...

编程日记 2025/1/17 6:05:22

浅谈云计算20 | OpenStack管理模块（下）

OpenStack管理模块&#xff08;下&#xff09; 五、存储管理5.1 存储管理概述 5.2 架构设计5.2.1 Cinder块存储架构5.2.2 Swift对象存储架构 六、网络管理6.1 网络管理概述6.2 架构解析6.2.1 Neutron网络服务架构6.2.2 网络拓扑架构 6.3 原理与流程6.3.1 网络创建原理6.3.2 网络…...

编程日记 2025/1/17 6:04:20

去年社融增量超32万亿 货币信贷平稳增长-乐享数科

数据显示&#xff0c;2024年全年&#xff0c;社会融资规模增量为32.26万亿元&#xff1b;去年12月末&#xff0c;社会融资规模同比增长8.0%&#xff0c;广义货币供应量&#xff08;M_[2]&#xff09;同比增长7.3%&#xff0c;人民币贷款同比增长7.6%&#xff0c;增速相比上月有…...

编程日记 2025/1/17 6:02:15

威联通NAS安全防护全攻略：10个必做设置让你的数据固若金汤

威联通NAS安全防护全攻略&#xff1a;10个必做设置让你的数据固若金汤 在数字化时代&#xff0c;数据安全已成为个人和企业最关注的议题之一。威联通NAS作为专业级网络存储设备&#xff0c;凭借其强大的硬件性能和丰富的软件生态&#xff0c;成为许多用户存储重要数据的首选。然…...

编程新知 2026/4/1 15:03:29

MTK平台录音杂音怎么来的？从AudioALSACaptureDataClientAurisysNormal的mDropPopSize说起

MTK平台录音杂音问题深度解析&#xff1a;从硬件初始化到算法优化的全链路解决方案 在移动设备音频开发领域&#xff0c;MTK平台的录音杂音问题一直是困扰开发者的典型痛点。特别是录音起始阶段出现的"爆破音"或"电流声"&#xff0c;不仅影响用户体验&…...

编程新知 2026/4/1 14:53:25

终极指南：如何在TouchGal一站式Galgame社区发现你的视觉小说宝藏

终极指南&#xff1a;如何在TouchGal一站式Galgame社区发现你的视觉小说宝藏 【免费下载链接】kun-touchgal-next TouchGAL是立足于分享快乐的一站式Galgame文化社区, 为Gal爱好者提供一片净土! 项目地址: https://gitcode.com/gh_mirrors/ku/kun-touchgal-next TouchGa…...

编程新知 2026/4/1 14:39:05

SAP-FICO LSMW实战：批量导入财务凭证与固定资产主数据(AS91)的完整指南

1. LSMW基础概念与适用场景 第一次接触LSMW这个工具时&#xff0c;我也被它复杂的界面吓到过。但用顺手后发现&#xff0c;这简直是SAP数据迁移的"瑞士军刀"。简单来说&#xff0c;LSMW&#xff08;Legacy System Migration Workbench&#xff09;是SAP系统内置的数…...

编程新知 2026/4/1 14:11:59

给数学恐惧症患者的DDPM前向扩散公式拆解：从‘图像变糊’到一行代码生成任意噪声图

给数学恐惧症患者的DDPM前向扩散公式拆解&#xff1a;从‘图像变糊’到一行代码生成任意噪声图 想象一下&#xff0c;你正在搅拌一杯咖啡。最初&#xff0c;咖啡是纯黑色的&#xff0c;但随着你不断加入牛奶&#xff0c;颜色逐渐变浅&#xff0c;最终变成一杯乳白色的液体。这…...

编程新知 2026/4/1 12:56:28

智能排障：快马ai助手实时解答openclaw安装难题，告别卡壳

最近在折腾OpenClaw这个工具时&#xff0c;发现它的安装过程真是让人头大——各种依赖报错、环境冲突、权限问题接踵而至。好在发现了InsCode(快马)平台的AI辅助功能&#xff0c;简直像给安装过程装上了智能导航。下面分享我的实战经验&#xff0c;如何用AI快速攻克OpenClaw安装…...

编程新知 2026/4/1 11:13:33

Bluesky AI助手Attie：用户不满下的未来挑战

Attie&#xff1a;定制化社交媒体动态新尝试Bluesky正在开发的新型AI助手Attie&#xff0c;以AT协议命名&#xff0c;可创建定制化的社交媒体动态。它作为一个独立的可选应用程序&#xff0c;目前处于仅限受邀用户参与的封闭测试阶段。其目标是打造一个比单纯搜索话题更全面的时…...

编程新知 2026/4/1 11:09:28

告别“直升机起飞”：用4张RTX 4090 DIY一台能放在工位旁的静音深度学习工作站

告别“直升机起飞”&#xff1a;用4张RTX 4090 DIY一台能放在工位旁的静音深度学习工作站 在深度学习研究的前沿领域&#xff0c;算力需求与日俱增&#xff0c;但商业级服务器的高昂价格和庞大体积往往让个人研究者望而却步。更令人困扰的是&#xff0c;传统多GPU工作站在满载…...

编程新知 2026/4/1 8:59:13

WarcraftHelper：让经典魔兽争霸III在现代电脑上焕发新生的全能助手

WarcraftHelper&#xff1a;让经典魔兽争霸III在现代电脑上焕发新生的全能助手 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为魔兽争霸III在宽…...

编程新知 2026/4/1 8:20:16

实战复盘：从帕鲁杯应急响应赛题看企业级安全事件调查全流程

企业级安全事件调查实战指南&#xff1a;从CTF赛题到真实攻防溯源 在网络安全领域&#xff0c;应急响应能力直接决定了企业遭受攻击后的损失程度。去年某大型电商平台因未能及时识别攻击链&#xff0c;导致用户数据持续泄露长达三周&#xff0c;最终造成数亿元的直接损失。这类…...

编程新知 2026/4/1 8:08:05