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

CSS—选择器

news 2026/2/11 6:12:45

一、CSS简介

二、HTML页面中常用的元素

三、CSS语法规则

四、常用的选择器

五、CSS的三种使用方法

六、选择器参考

一、CSS简介

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

在CSS中选择器的作用是用css为html页面中的元素添加样式，就需要用到css选择器。选择器可以根据不同的条件和位置来选择目标元素，从而实现对页面元素的精确控制。

二、HTML页面中常用的元素

那么HTML页面中常用的元素有哪些呢，如下所示：

<html> - 表示HTML文档的根元素。
<head> - 包含关于文档的元数据和其他头部信息。
<title> - 定义文档的标题，显示在浏览器的标题栏或选项卡上。
<body> - 包含文档的主要内容。
<h1>-<h6> - 表示标题，由大到小分为六级标题。
<p> - 表示一个段落。
<a> - 创建一个超链接。
<img> - 插入图片。
<ul> - 无序列表，表示项目之间没有特定顺序。
<ol> - 有序列表，表示项目按特定顺序排列。
<li> - 列表中的一个项目。
<div> - 用于组合其他元素或将其分组。
<span> - 内联元素容器，用于对文本的部分进行样式设置。
<input> - 表单输入元素，用于接收用户输入。
<button> - 表单按钮。
<form> - 创建一个表单。
<table> - 表格，用于展示二维数据。
<tr> - 表格中的一行。
<td> - 表格中的一个单元格。
<iframe> - 内嵌一个网页。
<audio> - 插入音频内容。
<video> - 插入视频内容。

这只是一小部分HTML元素的示例，还有许多其他元素可用于创建丰富的网页内容和交互。每个元素都有不同的属性和用法，可以根据需要选择适合的元素来组织和呈现网页内容。

三、CSS语法规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

四、常用的选择器

① 元素选择器（Element Selector）：通过元素名称选择 HTML 元素。

如下代码，p 选择器将选择所有 <p> 元素:

p {...color: blue;...
}

② 类选择器（Class Selector）：通过类别名称选择具有特定类别的 HTML 元素。

类选择器以 . 开头，后面跟着类别名称。

如下代码，.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

.highlight {...background-color: yellow;...
}

CSS（层叠样式表）中的类选择器是一种选择元素的方法，通过给HTML元素添加类名，可以为该元素定义特定的样式。

类选择器的作用：

样式复用：通过给多个元素添加同一个类名，可以为它们同时定义相同的样式，从而实现样式的复用。
选择特定元素：通过类选择器，可以选择具有特定类名的元素，从而为这些元素定义不同的样式。

类选择器的用法：

在CSS中，类选择器以点 . 开头，后面跟着类名。例如，要选择具有类名为"example"的元素，可以使用.example。
类名可以由数字、字母、连字符和下划线组成，不能以数字开头，并且区分大小写。
在HTML中，通过在元素的class属性中添加类名可以将该类应用到该元素。例如，<div class="example">...</div>。
可以通过组合类选择器和标签选择器来选择特定类型的元素。例如，要选择具有类名为"example"且为<a>标签的元素，可以使用a.example。

示例：
HTML:

<div class="example">Example 1</div>
<div class="example">Example 2</div>
<div class="other">Other</div>

CSS:

.example {color: blue;
}.other {color: red;
}

在上面的示例中，具有类名为"example"的两个元素将被设置为蓝色，而具有类名为"other"的元素将被设置为红色。通过类选择器，可以根据不同的需求为元素定义不同的样式。

③ ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML 元素。

ID 选择器以 # 开头，后面跟着 ID 名称。

如下代码，#runoob 选择器将选择具有 ID 为 "runoob" 的元素。

#runoob {...width: 200px;...
}

④ 属性选择器（Attribute Selector）：通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

如下代码，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

input[type="text"] {...border: 1px solid gray;...
}

⑤ 后代选择器（Descendant Selector）：通过指定元素的后代关系选择 HTML 元素。

后代选择器使用空格分隔元素名称。

如下代码，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

div p {...font-weight: bold;...
}

⑥ 通用选择器（Universal Selector）：选择所有 HTML 元素。通用选择器使用 * 符号。例如，* 选择器将选择页面上的所有元素。

五、CSS的三种使用方法

外部 CSS
内部 CSS
行内 CSS

① 外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

注意：请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;

② 内部CSS

若是HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

③ 行内CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

④ 多个样式表

如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。

⑤ 层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

六、选择器参考

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element,element	div,p	选择所有<div>元素和 <p> 元素	1
element.class	p.hometown	选择所有 class="hometown" 的 <p> 元素	1
element element	div p	选择<div>元素内的所有<p>元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧跟在 <div> 元素之后的第一个 <p> 元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute\|=language]	[lang\|=en]	选择 lang 属性等于 en，或者以 en- 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个<p>元素的第一个字母	1
:first-line	p:first-line	选择每一个<p>元素的第一行	1
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
:before	p:before	在每个<p>元素之前插入内容	2
:after	p:after	在每个<p>元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

CSS—选择器

目录一、CSS简介二、HTML页面中常用的元素三、CSS语法规则四、常用的选择器五、CSS的三种使用方法六、选择器参考一、CSS简介 CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应…...

编程日记 2023/8/13 1:14:56

【Unity实战系列】Unity的下载安装以及汉化教程

君兮_的个人主页即使走的再远，也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们，这里是君兮_，怎么说呢，其实这才是我以后真正想写想做的东西，虽然才刚开始，但好歹，我总算是启程了。今天要分享…...

编程日记 2023/8/13 1:13:55

电脑IP地址错误无法上网怎么办？

电脑出现IP地址错误后就将无法连接网络，从而无法正常访问互联网。那么当电脑出现IP地址错误时该怎么办呢？ 确认是否禁用本地连接你需要先确定是否禁用了本地网络连接，如果发现禁用，则将其启用即可。启用方法：点击桌…...

编程日记 2023/8/13 1:12:54

机器视觉项目流程和学习方法

机器视觉项目流程： 00001. 需求分析和方案建立 00002. 算法流程规划和业务逻辑设计 00003. 模块化编程和集成化实现 00004. 调试和优化，交付客户及文档学习机器视觉的方法： 00001. 实战学习，结合项目经验教训 00002. 学习…...

编程日记 2023/8/13 1:11:54

LNMP环境搭建wordpress以及跳转后台报404解决

基于上文配置好的LNMP环境继续搭建wordpress 目录一.到官网下载tar.gz包，并上传到Linux上，也可以通过复制链接地址进行下载二. 将wordpress中的所有文件移动到你nginx.conf中指定目录中三.为wordpress配置数据库四.到浏览器进行注册 1.刚开始…...

编程日记 2023/8/13 1:10:52

首先准备好5台机子：2台装有tomcat，3台装有nginx 1.关闭5台机子的防火墙 systemctl stop firewalld systemctl disable firewalld setenforce 0 Nginx1 vim /usr/local/nginx/conf/nginx.conf#在--#pid-- 下做四层代理 stream {upstream test {server …...

编程日记 2023/8/13 1:09:51

Tomcat部署与优化

目录一、Tomcat介绍二、Tomcat核心组件 1、web容器：完成web服务器的功能，web应用 2、servlet容器：名字：catalina，处理servlet代码 servlet的功能 3、jsp：jsp动态页面翻译成servlet代码，用…...

编程日记 2023/8/13 1:08:50

jmeter工具使用

jmeter工具使用官方下载安装好jdk后，下载之后直接运行即可基本流程 1、首先添加线程组线程组：JMeter是由Java实现的，并且使用一个Java线程来模拟一个用户，因此线程组（Thread Group）就是指一组用户的…...

编程日记 2023/8/13 1:07:48

【uniapp】封装一个全局自定义的模态框

【需求描述】在接口401处，需要实现全局提示并弹出自定义模态框的功能。考虑到uni-app内置的模态框和app原生提示框的自定义能力有限，我决定自行封装全局自定义的模态框，以此为应用程序提供更加统一且个性化的界面。【效果图】【封装】主…...

编程日记 2023/8/13 1:06:47

UNIX 入门

与 UNIX 建立连接启动会话登录命令提示符修改口令退出系统简单的 UNIX 命令命令格式ls 命令who 命令虚拟终端 tty伪终端 ptywho am i 命令 cal 命令help 命令man 命令 shell 概述shell 命令更换 shell临时更改 shell永久更改 shell 登录过程与 UNIX 建立连接启动会话要启…...

编程日记 2023/8/13 1:05:45

Golang通过alibabaCanal订阅MySQLbinlog

最近在做redis和MySQL的缓存一致性，一个方式是订阅MySQL的BinLog文件，我们使用阿里巴巴的Canal的中间件来做。 Canal是服务端和客户端两部分构成，我们需要先启动Canal的服务端，然后在Go程序里面连接Canal服务端，即可监…...

编程日记 2023/8/13 1:04:44

Python flask-restful 框架讲解

1、简介 Django 和 Flask 一直都是 Python 开发 Web 的首选，而 Flask 的微内核更适用于现在的云原生微服务框架。但是 Flask 只是一个微型的 Web 引擎，所以我们需要扩展 Flask 使其发挥出更强悍的功能。 python flask框架详解：https://blog.…...

编程日记 2023/8/13 1:03:43

MySQL_约束、多表关系

约束概念：就是用来作用表中字段的规则，用于限制存储在表中的数据。目的：保证数据库中数据的正确性，有效性和完整性。约束演示 #定义一个学生表，表中要求如下： #sn 表示学生学号，要求使用 …...

编程日记 2023/8/13 1:02:42

在Qt中使用LoadLibrary无法加载DLL

Qt系列文章目录文章目录 Qt系列文章目录前言一、问题分析前言最近因项目需要使用qt做开发，之前使用LoadLibrary加载dll成功，很庆幸，当一切都那么顺风顺水的时候，测试同事却发现，在windows平台上个别电脑上加载dll会…...

编程日记 2023/8/13 1:01:40

如何将区块链新闻稿发布到海外媒体?

随着区块链技术的不断发展，越来越多的区块链项目涌现出来，各大媒体也开始关注和报道区块链新闻。然而，如何将区块链新闻稿发布到海外媒体成为了许多区块链项目所面临的难题。本文将介绍一些有效的方法，帮助区块链项目将新闻稿发布…...

编程日记 2023/8/13 1:00:39

基于 CentOS 7 构建 LVS-DR 群集。

1.准备实验环境本次实验我准备了4台虚拟机 DS:DIP--192.168.163.138 VIP--192.168.163.200 RIP1(web1)--192.168.163.140 RIP2(web2)--192.168.163.141 Client：user--192.168.163.142 2.配置服务器环境 1)搭建简易的web服务 RIP1 [rootlocalhost ~]# yum …...

编程日记 2023/8/13 0:59:37

防火墙组建双击热备后，点击管理对端设备，老是打不开，怎么办？

环境： 防火墙 8.0.75 AF-2000-FH2130B-SC 问题描述： 防火墙组建双击热备后，点击管理对端设备，老是打不开，怎么办？ 浏览器老是加载解决方案： 1.打开设置查看双机连接的心跳接口是哪个端口 …...

编程日记 2023/8/13 0:58:35

【Kubernetes】Kubernetes之Pod详解

Pod 一、 Pod1. Pod 基础概念2. 在 Kubrenetes 集群中 Pod 使用方式2.1 pasue 容器2.2 kubernetes 中的 pause 容器提供的功能 3. Pod 的概念和结构组成4. Pod 的分类5. Pod 容器的分类5.1 基础容器（infrastructure container）5.2 初始化容器&#xff08…...

编程日记 2023/8/13 0:57:34

电商与客服系统完美对接指南源码-无缝对接唯一客服系统-提升电商客户体验...

提升电商客户体验，无缝对接唯一客服系统，助您商城腾飞！ 在如今竞争激烈的电商领域，除了优质的商品和吸引人的价格，出色的客户服务同样不可或缺。一个高效的客服系统能够为您的电商商城带来更多的机会，建立顾…...

编程日记 2023/8/13 0:56:32

新知识：Monkey 改进版之 App Crawler

原生Monkey 大家知道Monkey是Android平台上进行压力稳定性测试的工具，通过Monkey可以模拟用户触摸屏幕、滑动、按键等伪随机用户事件来对设备上的程序进行压力测试。而原生的Android Monkey存在一些缺陷： 事件太过于随机，测试有效性大打折扣…...

编程日记 2023/8/13 0:55:31

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2026/2/10 11:02:44

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端目录技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/22 16:15:42

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

是否存在路径（FIFOBB算法）

题目描述一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。输入第一行两个整数，分别表示n 和 e 的值（1…...

编程新知 2025/10/1 6:09:21

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南：从入门到实战一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

CSS—选择器

一、CSS简介

二、HTML页面中常用的元素

三、CSS语法规则

四、常用的选择器

五、CSS的三种使用方法

六、选择器参考

相关文章：

CSS—选择器

【Unity实战系列】Unity的下载安装以及汉化教程

电脑IP地址错误无法上网怎么办？

机器视觉项目流程和学习方法

LNMP环境搭建wordpress以及跳转后台报404解决

Nginx+Tomcat的动静分离

Tomcat部署与优化

jmeter工具使用

【uniapp】封装一个全局自定义的模态框

UNIX 入门

Golang通过alibabaCanal订阅MySQLbinlog

Python flask-restful 框架讲解

MySQL_约束、多表关系

在Qt中使用LoadLibrary无法加载DLL

如何将区块链新闻稿发布到海外媒体?

基于 CentOS 7 构建 LVS-DR 群集。

防火墙组建双击热备后，点击管理对端设备，老是打不开，怎么办？

【Kubernetes】Kubernetes之Pod详解

电商与客服系统完美对接指南源码-无缝对接唯一客服系统-提升电商客户体验...

新知识：Monkey 改进版之 App Crawler

UE5 学习系列（二）用户操作界面及介绍

基于大模型的 UI 自动化系统

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

定时器任务——若依源码分析

spring：实例工厂方法获取bean

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

是否存在路径（FIFOBB算法）

USB Over IP专用硬件的5个特点

GruntJS-前端自动化任务运行器从入门到实战

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join