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

Java—HTML：CSS选择器

article 2026/1/29 5:17:25

今天我要介绍的知识点内容是Java HTML中的CSS选择器；

CSS选择器用于定位HTML元素并为其添加样式。它允许我们控制网页的颜色、字体、布局和其他视觉元素。通过分离内容与样式。

下面我将介绍CSS中选择器的使用，并作举例说明；

选择器基本语法：

selector {property: value;
}

Selector（选择器）：指定要应用样式的HTML元素。
Property（属性）：定义样式的方面，如颜色、字体大小等。
Value（值）：属性的具体设定值。

例：

p { color: blue; }

注解：这条规则会将所有设置<p>标签内的文本颜色设置为蓝色

字体样式属性:

在网页设计中，字体的选择和样式对于用户体验至关重要。

`font-family；`

定义与用法：

font-family:指定一个或多个备用字体系列，或者是通用字体系列名称。

注意：当浏览器无法使用第一个字体时，它会尝试下一个字体，直到找到可用的字体。

语法：

font-family: "字体名称", fallback, ...;

场景模拟1：

例：

   h1{color:darkgreen}p{/* 字体颜色 */color:blue;/* 字体风格 *//* font-family:'Courier New',Courier, monospae;}

生效代码块：

</head><body><h1>lover all</h1><p>forever</p><p>forever</p><p>forever</p><p>forever</p><p>forever</p></body>
</html>

最终呈现：（CSS样式（颜色变化））

对比：

这是没有加入样式的效果：

这是加入样式后的效果：

`font-size；`

定义与用法：

font-size属性设置字体大小。

可以使用绝对单位（如像素px）、相对单位（如百分比%、em、rem），也可以使用关键字（如small, medium, large等）。

语法：

font-size: size;

例：

<style>h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;字体大小（如像素px）、相对单位（如百分比%、em、rem），也可以使用关键字（如small, medium, large等）}</style>

见效果如下：

注：可以看到字体变化的明显，数值越大字越大，反过来也是。

`font-weight`

定义与用法：

font-weight属性设置字体粗细。

可以使用数字（从100到900，400等于正常，700等于加粗）或者关键字（如normal、bold）。

语法：

font-weight: weight;

例：

h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;font-weight: 600;//字体粗细，从100到900，400等于正常，400以下则比正常还要细小，700等于加粗}

见效果如下：

`font-style`

定义与用法：

font-style属性设置字体风格，通常用于斜体化文本。

可能的值包括normal（默认）、italic（斜体）和oblique（倾斜）。

语法：

font-style: style;

例：

h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;font-weight: 600;font-style: italic;}

见效果如下：

`line-height`

定义与用法：

line-height属性设置行高，即行与行之间的距离。可以通过数值、百分比或长度单位来指定。

语法：

line-height: height;

例：

            h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;font-weight: 600;font-style: italic;line-height: 40px;}

见效果如下：

只需要设置20单位值即可； ==》line-height:20px;

内联样式

直接在HTML标签内使用style属性定义样式。适用于需要特别处理的个别元素。

例：

<p style="color:green;">这段文字是绿色的。</p>

内部样式表

在HTML文档的<head>部分使用<style>标签定义样式。适用于整个页面的一般样式。

例：

<head><style>p { color: red; }</style>

外部样式表

创建独立的.css文件，在指定页面中通过<link>标签链引入外部样式表。适用于多个页面共享的样式。

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

注：内联样式的优先级高于内部和外部样式表

基本选择器：

标签选择器

定义与用法：

标签选择器是最基础的选择器，用于针对特定HTML标签的所有实例应用样式。当你想要统一改变某类元素的外观时使用它。

特点：

简单直接，作用于所有同类标签。
不推荐用于特定化样式，因为它影响范围太广。

使用场景：

统一设置所有段落、标题或链接的样式。

例：

<!DOCTYPE html>
<html>
<head><style>p { color: blue; } /* 设置所有<p>标签内的文本颜色为蓝色 */</style>
</head>
<body><p>这段文字是蓝色的。</p>
<p>这段文字也是蓝色的。</p></body>
</html>

见效果如下：

注：标签选择器：针对同一类的标签，应用同一种样式

类选择器

定义与用法：

以.开头，后跟类名。它可以应用于任意数量的HTML元素，提供了一种复用样式的方法。

特点：

可重复使用，灵活度高。
可以与其他选择器组合使用，增强选择能力。

使用场景：

当你需要对多个不同类型的元素应用相同的样式时。
对特定区域或组件进行样式定制。

例：

<!DOCTYPE html>
<html>
<head><style>.highlight { background-color: yellow; } /* 设置所有具有.highlight类的元素背景色为黄色 */</style>
</head>
<body><p class="highlight">这段文字有黄色背景。</p>
<div class="highlight">这个div也有黄色背景。</div></body>
</html>

见效果如下：

注：类选择器：以.开头，后面跟着类名，在标签中使用class属性来使用

ID选择器

定义与用法：

以#开头，后跟ID名称。它只能应用于单个HTML元素，因为ID在同一页面上应该是唯一的。

特点：

高优先级，通常用于非常具体的情况。
适合页面上的独特元素。

使用场景：

对页面上的唯一元素进行样式定制。

例：

<!DOCTYPE html>
<html>
<head><style>#mainTitle { color: red; } /* 设置id为mainTitle的元素文本颜色为红色 */</style>
</head>
<body><h1 id="mainTitle">这是主标题</h1>
<p>这是一个普通的段落。</p></body>
</html>

见效果如下：

注：ID选择器：以#开头，后跟ID名称，在标签中使用id属性来使用

高级选择器

后代选择

定义与用法：

使用空格分隔两个选择器，选择第一个选择器内部的所有后代元素。

特点：

作用范围较广，可以选择所有层次结构中的后代元素。

使用场景：

对嵌套结构中的元素应用样式。

例：

<!DOCTYPE html>
<html>
<head><style>div p { color: orange; } /* 设置所有位于<div>内的<p>元素文本颜色为橙色 */</style>
</head>
<body><div><p>这段文字是橙色的。</p><span><p>这段文字也是橙色的。</p></span>
</div></body>
</html>

见效果如下：

子代选择器

定义与用法：

使用>符号，选择直接子元素。

特点：

作用范围限于直接子元素，不包括更深的后代元素。

使用场景：

对直接子元素进行精确控制。

例:

<!DOCTYPE html>
<html>
<head><style>ul > p { color: orange; } /* 设置所有作为<ul>直接子元素的<p>元素字体为橙色 */</style>
</head>
<body>
<ul><p>这个列表项是斜体。</p><li>这个列表项是斜体。</li><li><p>这个段落不是斜体。</p></li>
</ul>
</body>
</html>

见效果如下：

相邻兄弟选择器

定义与用法：

使用+符号，选择紧随其前一个元素之后的同级元素。

特点：

只选择紧跟在前一个元素后的下一个兄弟元素。

使用场景：

对连续出现的同级元素进行样式调整。

例：

<!DOCTYPE html>
<html>
<head><style>h1 + p { color: green; } /* 设置紧跟在<h1>后的第一个<p>元素文本颜色为绿色 */</style>
</head>
<body><h1>这是一个标题</h1>
<p>这段文字是绿色的。</p>
<p>这段文字不是绿色的。</p></body>
</html>

见效果如下：

注：相邻兄弟选择器：使用+符号，选择紧随其前一个元素之后的同级元素

通用兄弟选择器

定义与用法：

使用~符号，选择所有位于前一个元素之后的同级元素。

特点：

选择所有后续兄弟元素，不限于紧接的下一个。

使用场景：

对一组同级元素进行样式调整。

例：

<!DOCTYPE html>
<html>
<head><style>h1 ~ p { color: purple; } /* 设置所有位于<h1>之后的<p>元素文本颜色为紫色 */</style>
</head>
<body><h1>这是一个标题</h1>
<p>这段文字是紫色的。</p>
<p>这段文字也是紫色的。</p></body>
</html>

见效果如下：

注：通用兄弟选择器：使用~符号，选择所有位于前一个元素之后的同级元素

属性选择器（Attribute Selectors）

定义与用法：

根据元素的属性或属性值来选择元素。

a[target]会选择所有具有target属性的<a>元素，input[type="text"]会选择所有类型为text的<input>元素。

特点：

提供了对特定属性的精准选择。

使用场景：

对带有特定属性的元素进行样式调整

例：

<!DOCTYPE html>
<html>
<head><style>a[target="_blank"] { color: purple; } /* 设置所有target属性为"_blank"的<a>元素文本颜色为紫色 */</style>
</head>
<body><a href="http://example.com" target="_blank">超链接颜色设置。</a>
<a href="http://example.com">未曾设置超链接颜色。</a></body>
</html>

见效果如下：

注：属性选择器：根据元素的属性或属性值来选择元素。

总结：

希望以上有关于JavaHTML 的CSS内容知识点能给你带来一定的帮助，同时非常感谢各位大佬的点赞与支持，我们下一篇不见不散

Java—HTML：CSS选择器

今天我要介绍的知识点内容是Java HTML中的CSS选择器； CSS选择器用于定位HTML元素并为其添加样式。它允许我们控制网页的颜色、字体、布局和其他视觉元素。通过分离内容与样式。下面我将介绍CSS中选择器的使用，并作举例说明； 选择器基本语…...

编程日记 2026/1/17 22:06:08

如何将/dev/ubuntu-vg/lv-data的空间扩展到/dev/ubuntu-vg/ubuntu-lv的空间上

要将 /dev/ubuntu-vg/lv-data 的空间扩展到 /dev/ubuntu-vg/ubuntu-lv 上，实际上是将 lv-data 的空间释放出来，并将其分配给 ubuntu-lv。以下是详细的步骤和操作说明： 已知信息你有两个逻辑卷： /dev/ubuntu-vg/lv-data/dev/ubun…...

编程日记 2026/1/15 20:05:24

SSM阶段性总结

0 Pojo类前端给后端：DTO 后端给前端：VO 数据库：PO/VO 业务处理逻辑：BO 统称pojo 1 代理模式实现静态代理： 1定义接口2实现类3写一个静态代理类4这样在调用时就可以使用这个静态代理类来实现某些功能实现动态代…...

编程日记 2026/1/27 16:31:27

Qt 5.14.2入门（一）写个Hello Qt!程序

目录参考链接：一、新建项目二、直接运行三、修改代码增加窗口内容1、Qt 显示一个 QLabel 标签控件窗口2、添加按键参考链接： Qt5教程（一）：Hello World 程序 Qt 编程指南一、新建项目 1、新建一个项目&#xff08…...

编程日记 2026/1/29 3:56:17

Jmeter分布式测试启动

代理客户端配置打开jmeter.properties文件，取消注释并设置端口（如server_port1099）， 并添加server.rmi.ssl.disabletrue禁用SSL加密。 （Linux系统）修改jmeter-server文件中的RMI_HOST_DEF为代理机实际IP。…...

编程日记 2026/1/14 18:27:59

redis itheima

缓存问题核心是如何避免大量请求到达数据库缓存穿透既不存在于 redis，也不存在于 mysql 的key，被重复请求 public Result queryById(Long id) {String key CACHE_SHOP_KEYid;// 1. redis & mysqlString shopJson stringRedisTemplate.opsFo…...

编程日记 2026/1/28 2:26:58

mysql 执行计划中eq_ref是什么意思？

在 MySQL 的执行计划中，eq_ref 是一种连接类型（type），表示查询优化器在使用**主键（PRIMARY KEY）或唯一索引（UNIQUE INDEX）**进行等值匹配（）时，对表…...

编程日记 2025/9/1 7:42:34

QT 调用动态链接库

引入QT提供的动态加载库的类 #include <QLibrary>定义函数指针类型 typedef void (*GetResFunction)(uint8_t*, uint8_t*, int);定义函数指针的主要目的是为了解析和调用动态链接库中的函数。如果你不定义函数指针，就无法直接调用动态链接库中的函数加载动…...

编程日记 2026/1/9 12:47:33

100天精通Python（爬虫篇）——第122天：基于selenium接管已启动的浏览器（反反爬策略）

文章目录 1、问题描述2、问题推测3、解决方法3.1 selenium自动启动浏览器3.2 selenium接管已启动的浏览器3.3 区别总结 4、代码实战4.1 手动方法（手动打开浏览器输入账号密码）4.2 自动方法（.bat文件启动的浏览器） 1、问题描述使用…...

编程日记 2026/1/21 6:07:31

MPP 架构解析：原理、核心优势与对比指南

一、引言：大数据时代的数据处理挑战全球数据量正以指数级增长。据 Statista 统计，2010 年全球数据量仅 2ZB，2025 年预计达 175ZB。企业面临的核心挑战已从“如何存储数据”转向“如何快速分析数据”。传统架构在处理海量数据时暴露明显瓶颈…...

编程日记 2026/1/27 17:27:17

GitHub 趋势日报 (2025年04月06日) 本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ 📈 今日整体趋势 Top 10 排名项目名称项目描述今日获星语言1microsoft/markitdownPython tool for converting files and office documents to Markdown.⭐ 548Py…...

编程日记 2025/9/2 9:07:31

Python设计模式-工厂模式

一、模式定义与核心思想工厂模式（Factory Pattern）属于创建型设计模式，其核心思想是通过一个"工厂类"来创建对象，而不是直接调用类的构造函数。这种模式将对象的实例化过程封装起来，使系统在实例化对象时能…...

编程日记 2026/1/19 5:19:12

SAP-ABAP:SAP的Open SQL和Native SQL详细对比

在SAP ABAP开发中，Open SQL和Native SQL是两种操作数据库的方式，它们的核心区别在于可移植性、功能范围及底层实现机制。以下是详细对比： 1. Open SQL：深入解析 1.1 核心特性数据库抽象层 Open SQL 由 SAP 内核的 Database Interface (DBI) 转换为目标数据库的 SQL（如 …...

编程日记 2025/9/1 1:32:17

蓝桥杯拼数（字符串大小比较）

题目描述设有 n 个正整数 a1…an，将它们联接成一排，相邻数字首尾相接，组成一个最大的整数。输入格式第一行有一个整数，表示数字个数 n。第二行有 n 个整数，表示给出的 n 个整数 ai。输出格式一个正整…...

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

Server-Sent Events一种允许服务器向客户端发送实时更新的 Web API

Server-Sent Events（SSE）是一种允许服务器向客户端发送实时更新的 Web API。它基于 HTTP 协议，提供了一种单向的、服务器到客户端的通信机制，客户端可以通过监听服务器发送的事件来接收实时数据。下面从原理、使用场景、代码示例等…...

编程日记 2025/9/2 2:08:42

彻底解决VS2008编译错误：fatal error C1083 无法打开包括文件“stdint.h“

彻底解决VS2008编译错误：fatal error C1083 无法打开包括文件"stdint.h" 一、错误现象与本质原因当在Visual Studio 2008中编译包含C99标准整数类型（如int8_t、uint32_t）的代码时，常出现以下编译错误： f…...

编程日记 2026/1/27 14:40:45

react从零开始的基础课

全文约5万字。 1.hello,.. // App.jsx import { useState } from react import reactLogo from ./assets/react.svg import viteLogo from /vite.svg import ./App.cssfunction App() {const [count, setCount] useState(0)return (<><Greeting name"world&qu…...

编程日记 2026/1/21 17:03:50

算法题型讲解

一.双指针主要分为俩种类型： 1.左右指针：双指针指向开头，以一定标准移动或交换，对区域进行划分，或找到特殊点的位置 （如：快慢指针判断有无环，移动零） 2.对撞指针&am…...

编程日记 2026/1/18 19:29:40

操作主机的管理

1.在AD林范围内，有哪几个操作主机角色架构主机（Schema Master） 功能：负责整个AD林中所有对象和属性的定义，是唯一可以更新目录架构的DC。架构更新会从架构主机复制到目录林中的所有其他域控制器。作用范围&#xf…...

编程日记 2025/12/30 14:36:31

Redis和数据库一致性问题

操作模拟 1、先更新数据库还是先更新缓存？ 1.1先更新缓存，再更新数据库按并发的角度来说，有两个线程A、B，操作同一个数据，线程A先更新缓存为1，在线程A更新数据库之前，这时候线程B进来&#…...

编程日记 2026/1/29 4:05:47

第R8周：RNN实现阿尔茨海默病诊断（pytorch）

>- **🍨 本文为[🔗365天深度学习训练营]中的学习记录博客** >- **🍖 原作者：[K同学啊]** 本人往期文章可查阅： 深度学习总结一、准备工作 🏡 我的环境： 语言环境：Python3.1…...

编程日记 2026/1/27 13:38:36

《穿透表象，洞察分布式软总线“无形”之奥秘》

分布式系统已成为众多领域的关键支撑技术，而分布式软总线作为实现设备高效互联的核心技术，正逐渐走入大众视野。它常被描述为一条“无形”的总线，这一独特属性不仅是理解其技术内涵的关键，更是把握其在未来智能世界中重要作用的切…...

编程日记 2025/11/7 3:38:15

C++基础精讲-02

文章目录 1.C/C申请、释放堆空间的方式对比1.1C语言申请、释放堆空间1.2C申请、释放堆空间1.2.1 new表达式申请数组空间 1.3回收空间时的注意事项1.4malloc/free 和 new/delete 的区别 2.引用2.1 引用的概念2.2 引用的本质2.3 引用与指针的联系与区别2.4 引用的使用场景2.4.1 引…...

编程日记 2026/1/18 14:27:54

【网络安全】Linux 命令大全

未经许可，不得转载。文章目录前言正文文件管理文档编辑文件传输磁盘管理磁盘维护网络通讯系统管理系统设置备份压缩设备管理其它命令前言在网络安全工作中，熟练掌握 Linux 系统中的常用命令对于日常运维、日志分析和安全排查等任务至关重要。以下是常用命令的整理汇总，…...

编程日记 2026/1/18 5:31:18

双相机结合halcon的条码检测

以下是针对提供的C#代码的详细注释和解释，结合Halcon库的功能和代码结构进行说明： --- ### **代码整体结构** 该代码是一个基于Halcon库的条码扫描类GeneralBarcodeScan，支持单台或双台相机的条码检测，并通过回调接口返回结果。…...

编程日记 2025/11/29 11:21:37

C++学习之ORACLE①

目录 1.ORACLE数据库简介 2..ORACLE数据库安装 3..ORACLE体系结构 4..ORACLE基本概念 5..ORACLE基本元素 6..ORACLE数据库启动和关闭 7.SQLPLUS登录ORACLE数据库相关操作 8.SQLPLUS的基本操作 9.oracle中上课使用的方案 10.SQL语言分类 11.SQL中的select语句语法和注…...

编程日记 2026/1/22 7:11:56

setInterval问题以及前端如何实现精确的倒计时

一、为什么setInterval不能实现原因有两：1、js是单线程，基于事件循环执行其他任务（这里建议读者可以多去了解一下浏览器线程与事件循环相关知识） 2、setinterval是每隔delay时间，把逻辑放到任务队列中，而…...

编程日记 2025/9/2 2:06:44

企业级开发SpringBoost玩转Elasticsearch

案例 Spring Boot 提供了 spring-data-elasticsearch 模块，可以方便地集成 Elasticsearch。下面我们将详细讲解如何在 Spring Boot 中使用 Elasticsearch 8，并提供示例代码。 1. 添加依赖: 首先，需要在 pom.xml 文件中添加 spring-data-e…...

编程日记 2026/1/19 3:39:43

从零开始的图论讲解(1)——图的概念,图的存储,图的遍历与图的拓扑排序

目录前言图的概念 1. 顶点和边 2. 图的分类 3. 图的基本性质图的存储邻接矩阵存图邻接表存图图的基本遍历拓扑排序拓扑排序是如何写的呢? 1. 统计每个节点的入度 2. 构建邻接表 3. 将所有入度为 0 的节点加入队列 4. 不断弹出队头节点，更新其…...

编程日记 2026/1/20 20:18:52

SpringBoot框架—启动原理

1.SpringBootApplication注解在讲解启动原理之前先介绍一个非常重要的注解SpringBootApplication，这个注解在Springboot程序的入口文件Application.java中必须添加。SpringBootApplication是一个整合了三个核心注解的组合注解。三个核心注解的作用机制&#xff1…...

编程日记 2026/1/20 7:20:09

字体样式属性:

font-family；

场景模拟1：

font-size；

font-weight

font-style

line-height

内联样式

内部样式表

外部样式表

基本选择器：

高级选择器

相邻兄弟选择器

总结：

相关文章：

`font-family；`

`font-size；`

`font-weight`

`font-style`

`line-height`