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

【CSS—前端快速入门】CSS 选择器

article 2026/3/27 7:29:33

在这里插入图片描述

CSS

1. CSS介绍

1.1 什么是CSS?

CSS(Cascading Style Sheet)，层叠样式表，用于控制页面的样式；

CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果；能够做到页面的样式和
结构分离；

在这里插入图片描述

1.2 基本语法规范

选择器 +{一条/N条声明}

选择器决定针对谁修改(找谁)
声明决定修改啥(干啥)
声明的属性是键值对
使用:区分键值对,使用:区分键和值.

<style>p{/*设置字体颜色 */color: red;/*设置字体大小 */font-size: 30px;
}
</style><p>hello</p>

注意:

CSS 要写到 style标签中 (后面还会介绍其他写法)
style 标签可以放到页面任意位置，一般放到 head 标签内.
CSS 使用 /**/作为注释 (使用 ctrl +/快速切换).

在这里插入图片描述

保存代码，查看页面：在这里插入图片描述

在这里插入图片描述

1.3 引入方式

行内样式

在这里插入图片描述

内部样式

在这里插入图片描述

外部样式

在这里插入图片描述

我们再创建一个新文件，用于写入选择器，然后在原文件的 head 内通过上述语法引入新文件的信息：
在这里插入图片描述

在这里插入图片描述

写好后，保存两个文件，重新打开页面：

在这里插入图片描述

值得一提，选择器的生效优先级遵从就近原则；

1.4 规范

样式大小写

虽然 CSS 不区分大小写，我们开发时统一使用小写字母

空格规范

冒号后面带空格
选择器 和 { 之间也有一个空格.

2. CSS选择器

在这里插入图片描述

标签选择器

/*选择所有的a标签，设置颜色为红色/a{color: red;
}/*选择所有的div标签，设置颜色为绿色*/div {color: green;
}

在这里插入图片描述
保存代码，打开页面：

在这里插入图片描述

要修改 div3 的颜色，我们可以设置 a { } 选择器，来选择所有 a 标签，并设置颜色：

在这里插入图片描述

类选择器

class 选择器的概念和规范使用如下：

可以为每一个标签都添加 class 属性
class 的值不要求唯一
在使用class 选择器时，需要在 class 选择器前加一个 . ，如 .class 名{ }

在这里插入图片描述

保存代码，打开页面：

在这里插入图片描述

ID 选择器

ID 的概念和规范使用如下：

一个页面中的 ID 值原则性上要求是唯一的

可以为每个标签都设置 ID

可以为 ID 赋任何值，哪怕是标签名（ div , span , title…)

在使用 ID 选择器时，需要在 ID 选择器前加一个 # ，如 # id 名{ }，避免 ID 是标签名的时候，编译器误以为使用的是标签选择器

在这里插入图片描述

保存代码后，打开页面：

在这里插入图片描述

通配符选择器

通配符的概念和通配符选择器的使用如下：

通配符：*，表示选择所有，如SQL 中的 select* ；

通配符选择器的使用： *{ }，表示选择当前页面的所有元素；

通配符选择器的优先级较前面几种选择器，优先级是比较低的；

在这里插入图片描述

保存代码，打开页面：

在这里插入图片描述

复合选择器

复合选择器，是由多个单选择器组成的多选择器，又分为并集和交集的形式：

并集形式，选择器用 , 隔开；

交集形式，选择器用空格隔开；

如果要精细选择某个部分，就可以为这个部分的标签添加特征属性，如 ID , class 等等，再使用交集；

并集

在这里插入图片描述

保存代码，打开页面：

在这里插入图片描述

并集

补充一个常用的标签：

<body><!-- 无序列表标签 --><ul><li></li></ul><!-- 有序列表标签 --><ol><li></li></ol></body>

在这里插入图片描述

如果要只想让有序列表的超链接字体改为红色，我们就可以使用复合选择器的交集形式：

在这里插入图片描述

【CSS—前端快速入门】CSS 选择器

CSS 1. CSS介绍 1.1 什么是CSS? CSS(Cascading Style Sheet)，层叠样式表，用于控制页面的样式； CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果；能够做到页面的样式和结构分离； 1…...

编程日记 2026/3/24 3:13:10

Linux安装jdk，node，mysql，redis

准备工作： 1.安装VMware软件，下载CentOs7镜像文件，在VMware安装CentOs7 2.宿主机安装Xshell用来操作linux 3. .宿主机安装Xftp用来在宿主机和虚拟机的linux传输文件案例1：在 /home/soft文件夹解压缩jdk17，并配置环…...

编程日记 2026/3/22 23:15:10

深度求索（DeepSeek）的AI革命：NLP、CV与智能应用的技术跃迁

Deepseek官网：DeepSeek 引言：AI技术浪潮中的深度求索近年来，人工智能技术以指数级速度重塑全球产业格局。在这场技术革命中，深度求索（DeepSeek）凭借其前沿的算法研究、高效的工程化能力以及对垂直场景的…...

编程日记 2026/3/27 5:01:16

Minio搭建并在SpringBoot中使用完成用户头像的上传

Minio使用搭建并上传用户头像到服务器操作,学习笔记 Minio介绍 minio官网 MinIO是一个开源的分布式对象存储服务器，支持S3协议并且可以在多节点上实现数据的高可用和容错。它采用Go语言开发，拥有轻量级、高性能、易部署等特点，并且可以自由…...

编程日记 2026/3/23 5:27:16

【鸿蒙Next】测试包签名、打包、安装整体过程记录

签名打包记录： HarmonyOS应用签名、打Hap包、Hap调试包真机安装步骤 https://blog.csdn.net/qq_34462735/article/details/135226332 测试包真机安装方式二 DevEco Testing 鸿蒙应用示例：DevEco Testing 工具的常用功能及使用场景 https://blog.csd…...

编程日记 2025/3/24 13:17:12

阿里云 | 快速在网站上增加一个AI助手

创建智能体应用如上所示，登录阿里云百炼人工智能业务控制台，创建智能体应用，智能体应用是一个agent，即提供个人或者企业的代理或中间件组件应用，对接阿里云大模型公共平台，为个人或者企业用户提供大模型应…...

编程日记 2026/3/24 10:56:52

Raspberry Pi边缘计算网关设计与LoRa通信实现

Raspberry Pi边缘计算网关设计与LoRa通信实现摘要第一章绪论1.1 研究背景1.2 研究现状1.3 论文结构第二章相关技术理论2.1 边缘计算体系架构2.2 LoRa通信技术2.3 Raspberry Pi硬件生态第三章系统架构设计3.1 硬件架构设计3.2 软件架构设计3.3 混合通信协议设计第四章硬…...

编程日记 2025/3/25 10:41:46

原型链与继承

#搞懂还是得自己动手# 原型链 function Person(name) { this.name name; } Person.prototype.sayName function() { console.log(this.name); };const p new Person("Alice"); 原型链关系图： 原型链：person->Person.prototype->O…...

编程日记 2026/3/16 20:38:04

动态规划 ─── 算法5

动态规划（Dynamic Programming，简称 DP）是一种用于解决复杂问题的算法设计技术，特别适用于具有重叠子问题和最优子结构性质的问题。动态规划通过将问题分解为更小的子问题，并存储子问题的解来避免重复计算，…...

编程日记 2026/3/16 20:37:41

博客系统--测试报告

博客系统--测试报告项目背景项目功能功能测试①登录功能测试②发布博客功能测试③删除文章功能测试④功能测试总结： 自动化测试自动化脚本执行界面： 性能测试本博文主要针对个人实现的项目《博客系统》去进行功能测试、自动化测试、性能测试&#xff0…...

编程日记 2026/3/17 13:06:56

【博资考4】网安学院-硕转博考试内容

【博资考4】硕转博考试内容 - 网络安全与基础理论写在最前面一. **21年硕转博面试内容回顾**网络、逆向、操作系统、攻防、漏洞1. **网络安全常见攻击方式及其防范措施**1.1 **DDoS攻击（分布式拒绝服务）**1.2 **SQL注入攻击**1.3 **XSS攻击（…...

编程日记 2026/3/20 10:09:20

GPT-4.5 怎么样？如何升级使用ChatGPTPlus/Pro? GPT-4.5设计目标是成为一款非推理型模型的巅峰之作

GPT-4.5 怎么样？如何升级使用ChatGPTPlus/Pro? GPT-4.5设计目标是成为一款非推理型模型的巅峰之作今天我们来说说上午发布的GPT-4.5，接下来我们说说GPT4.5到底如何，有哪些功能？有哪些性能提升？怎么快速使用到GPT-4.…...

编程日记 2026/3/23 4:29:02

git命令学习记录

1. git reset 参数说明 git reset 是用来回退版本的，它可以添加三个参数，常用的使用格式是这样的：git reset [--hard | --soft | --mixed] 版本号一般使用git修改文件并提交需要三步，第一步在文本编辑器中编辑文件，也…...

编程日记 2026/2/17 13:32:37

【HTML学习笔记基础篇】

HTML学习笔记基础篇一、HTML概述1.1 什么是HTML1.2 HTML文档的基本结构二、HTML基础标签2.1 标题标签2.2 段落标签2.3 换行标签2.4 链接标签2.6 列表标签2.7 表格标签三、HTML进阶知识3.1 行级元素与块级元素3.3 语义化标签四、开发工具与技巧4.1 开发工具4.2 常用技巧五、…...

编程日记 2026/1/4 18:40:24

DeepSeek 开源周：第五天 - Fire-Flyer 文件系统（3FS）

（下面文字主要由 Grok 3 协助生成） 概述 Deepseek 今天开源的 Fire-Flyer 文件系统（3FS）是一个高性能分布式文件系统，专门为 AI 训练和推理设计。研究表明，它解决了 AI 工作负载中处理海量数据的高效存储需…...

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

基于专利合作地址匹配的数据构建区域协同矩阵

文章目录地区地址提取完成的处理代码在专利合作申请表中，有多家公司合作申请。在专利权人地址中， 有多个公司的地址信息。故想利用这里多个地址。想用这里的地址来代表区域之间的专利合作情况代表区域之间的协同、协作情况。下图是专利合作表的一部分…...

编程日记 2026/3/26 11:24:55

【AI+智造】在阿里云Ubuntu 24.04上部署DeepSeek R1 14B的完整方案

作者：Odoo技术开发/资深信息化负责人日期：2025年2月28日一、部署背景与目标 DeepSeek R1作为国产大语言模型的代表，凭借其强化学习驱动的推理能力，在复杂任务（如数学问题、编程逻辑）中表现优异。本地化部…...

编程日记 2025/12/9 7:47:07

0x02 js、Vue、Ajax

文章目录 js核心概念js脚本引入html的方式基础语法事件监听 Vuevue简介v-forv-bindv-if&v-showv-model&v-on Ajax js 核心概念 JavaScript：是一门跨平台、面向对象的脚本语言，用来控制网页行为实现交互效果，由ECMAScript、BOM、DOM…...

编程日记 2026/3/19 7:25:32

深入解析数据倾斜：原因、影响与优化方案

在分布式计算和大数据处理中，数据倾斜（Data Skew） 是一个常见且影响性能的难题。它可能导致某些计算节点负载过高，而其他节点资源浪费，从而影响整体吞吐量和任务执行时间。在本文中，我们将深入分析数据倾…...

编程日记 2026/2/11 14:58:30

Python Tornado 框架面试题及参考答案

目录 Tornado 框架的核心组件是什么？解释其作用。 Tornado 与其他 Python 框架（如 Django、Flask）的主要区别是什么？为什么 Tornado 适合高并发场景？其设计哲学是什么？解释 Tornado 的 Application 类和 RequestHandler 类的关系。如何在 Tornado 中配置静态文件路…...

编程日记 2025/12/17 19:22:52

IDEA 使用codeGPT+deepseek

一、环境准备 1、IDEA 版本要求安装之前确保 IDEA 处于 2023.x 及以上的较新版本。 2、Python 环境安装 Python 3.8 或更高版本为了确保 DeepSeek 助手能够顺利运行，您需要在操作系统中预先配置 Python 环境。具体来说，您需要安装 Python 3.8 或更高…...

编程日记 2026/3/26 11:19:30

Linux笔记---一切皆文件

1. 含义 “一切皆文件”是 Linux 对系统资源的高度抽象，通过文件接口屏蔽底层差异，提供了简洁、一致的操作方式。这种设计降低了系统复杂性，使得工具、脚本和应用程序能够以统一模式处理多样化资源，是 Linux 强大灵活性的重要基石…...

编程日记 2026/3/16 20:37:55

ubuntu22.04安装docker engine

在Ubuntu 22.04上安装Docker Engine可以通过以下步骤完成： 更新系统包索引： sudo apt update安装必要的依赖包： 这些包允许apt通过HTTPS使用仓库。 sudo apt install -y apt-transport-https ca-certificates curl software-properties-commo…...

编程日记 2025/3/26 4:37:45

DeepSeek开源周，第五弹再次来袭，3FS

Fire-Flyer 文件系统（3FS）总结： 一、核心特点 3FS 是一个专为 AI 训练和推理工作负载设计的高性能分布式文件系统，利用现代 SSD 和 RDMA 网络，提供共享存储层，简化分布式应用开发。其主要特点包括&#xf…...

编程日记 2026/3/25 13:29:13

RagFlow专题二、RagFlow 核心架构（数据检索、语义搜索与知识融合）

深入解析 RagFlow 核心架构：数据检索、语义搜索与知识融合在前一篇文章中，我们对 RagFlow 的核心理念、与传统 RAG 的区别以及其适用场景进行了深入探讨。我们了解到，RagFlow 通过动态优化检索、增强生成质量以及实时知识管理，使得大模型在复杂任务中的表现更加稳定和高效…...

编程日记 2025/8/13 8:32:38

【音视频】VLC播放器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档一、vlc是什么？ VLC Media Player（简称VLC）是一款免费、开源、跨平台的多媒体播放器，由非营利组织VideoLAN开发，最…...

编程日记 2026/3/25 18:12:45

【软件测试】_使用selenium进行自动化测试示例

目录 1. 导入依赖 2. 使用selenium编写测试代码 3. 运行结果 4. 关于浏览器驱动管理及浏览器驱动配置创建一个空项目用于进行selenium的自动化测试。 1. 导入依赖 <dependencies><!-- https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager…...

编程日记 2026/3/25 18:45:29

【清华大学】DeepSeek从入门到精通完整版pdf下载

DeepSeek从入门到精通.pdf 一共104页完整版下载链接: https://pan.baidu.com/s/1-gnkTTD7EF2i_EKS5sx4vg?pwd1234 提取码: 1234 或链接：https://pan.quark.cn/s/79118f5ab0fd 一、DeepSeek 概述背景与定位 DeepSeek 的研发背景核心功能与技术特点&#xff08…...

编程日记 2026/3/25 11:40:25

Ubuntu 下查看进程 PID 和终止进程方法

查看进程 PID 使用 ps 命令: ps aux | grep <process_name>例如，查看名为 python 的进程： ps aux | grep python使用 pgrep 命令: pgrep <process_name>例如，查看名为 python 的进程： pgrep python使用 top 命令: top…...

编程日记 2025/3/6 23:43:38

JeeWMS graphReportController.do SQL注入漏洞复现(CVE-2025-0392)

免责申明：本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权，请及时与我们联系，我们将尽快处理并删除相关内容。 0x0…...

编程日记 2025/3/10 21:51:01

CSS

1. CSS介绍

1.1 什么是CSS?

1.2 基本语法规范

1.3 引入方式

1.4 规范

2. CSS选择器

标签选择器

类选择器

ID 选择器

通配符选择器

复合选择器

相关文章：