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

CSS—选择器

news 2025/10/4 7:09:55

目录

一、CSS简介

二、HTML页面中常用的元素

 三、CSS语法规则

四、常用的选择器

五、CSS的三种使用方法

六、选择器参考

一、CSS简介

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

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

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

二、HTML页面中常用的元素

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

  1. <html> - 表示HTML文档的根元素。
  2. <head> - 包含关于文档的元数据和其他头部信息。
  3. <title> - 定义文档的标题，显示在浏览器的标题栏或选项卡上。
  4. <body> - 包含文档的主要内容。
  5. <h1>-<h6> - 表示标题，由大到小分为六级标题。
  6. <p> - 表示一个段落。
  7. <a> - 创建一个超链接。
  8. <img> - 插入图片。
  9. <ul> - 无序列表，表示项目之间没有特定顺序。
  10. <ol> - 有序列表，表示项目按特定顺序排列。
  11. <li> - 列表中的一个项目。
  12. <div> - 用于组合其他元素或将其分组。
  13. <span> - 内联元素容器，用于对文本的部分进行样式设置。
  14. <input> - 表单输入元素，用于接收用户输入。
  15. <button> - 表单按钮。
  16. <form> - 创建一个表单。
  17. <table> - 表格，用于展示二维数据。
  18. <tr> - 表格中的一行。
  19. <td> - 表格中的一个单元格。
  20. <iframe> - 内嵌一个网页。
  21. <audio> - 插入音频内容。
  22. <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元素添加类名，可以为该元素定义特定的样式。

类选择器的作用：

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

类选择器的用法：

  1. 在CSS中，类选择器以点 . 开头，后面跟着类名。例如，要选择具有类名为"example"的元素，可以使用.example。
  2. 类名可以由数字、字母、连字符和下划线组成，不能以数字开头，并且区分大小写。
  3. 在HTML中，通过在元素的class属性中添加类名可以将该类应用到该元素。例如，<div class="example">...</div>。
  4. 可以通过组合类选择器和标签选择器来选择特定类型的元素。例如，要选择具有类名为"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 元素指定了多个样式时，会使用哪种样式呢？

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

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

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

六、选择器参考

选择器示例示例说明CSS
.class.intro选择所有class="intro"的元素1
#id#firstname选择所有id="firstname"的元素1
**选择所有元素2
elementp选择所有<p>元素1
element,elementdiv,p选择所有<div>元素和 <p> 元素1
element.classp.hometown选择所有 class="hometown" 的 <p> 元素1
element elementdiv p选择<div>元素内的所有<p>元素1
element>elementdiv>p选择所有父级是 <div> 元素的 <p> 元素2
element+elementdiv+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
:linka:link选择所有未访问链接1
:visiteda:visited选择所有访问过的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标在链接上面时1
:focusinput:focus选择具有焦点的输入元素2
:first-letterp:first-letter选择每一个<p>元素的第一个字母1
:first-linep:first-line选择每一个<p>元素的第一行1
:first-childp:first-child指定只有当<p>元素是其父级的第一个子级的样式。2
:beforep:before在每个<p>元素之前插入内容2
:afterp:after在每个<p>元素之后插入内容2
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有<p>元素2
element1~element2p~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-typep:first-of-type选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
:only-childp: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-childp:last-child选择每个p元素是其父级的最后一个子级。3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的p元素（包括文本节点）3
:target#news:target选择当前活动的#news元素（包含该锚名称的点击的URL）3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput: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&#xff0c;层叠样式表&#xff09;&#xff0c;是一种用来为结构化文档&#xff08;如 HTML 文档或 XML 应…...

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

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

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

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

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

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

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

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

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

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

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

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

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

Nginx+Tomcat的动静分离

首先准备好5台机子&#xff1a;2台装有tomcat&#xff0c;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容器&#xff1a;完成web服务器的功能&#xff0c;web应用 2、servlet容器&#xff1a;名字&#xff1a;catalina&#xff0c;处理servlet代码 servlet的功能 3、jsp&#xff1a;jsp动态页面翻译成servlet代码&#xff0c;用…...

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

jmeter工具使用

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

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

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

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

编程日记 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的缓存一致性&#xff0c;一个方式是订阅MySQL的BinLog文件&#xff0c;我们使用阿里巴巴的Canal的中间件来做。 Canal是服务端和客户端两部分构成&#xff0c;我们需要先启动Canal的服务端&#xff0c;然后在Go程序里面连接Canal服务端&#xff0c;即可监…...

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

Python flask-restful 框架讲解

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

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

MySQL_约束、多表关系

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

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

在Qt中使用LoadLibrary无法加载DLL

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

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

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

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

编程日记 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&#xff1a;user--192.168.163.142 2.配置服务器环境 1)搭建简易的web服务 RIP1 [rootlocalhost ~]# yum …...

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

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

环境&#xff1a; 防火墙 8.0.75 AF-2000-FH2130B-SC 问题描述&#xff1a; 防火墙组建双击热备后&#xff0c;点击管理对端设备&#xff0c;老是打不开&#xff0c;怎么办&#xff1f; 浏览器老是加载 解决方案&#xff1a; 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 基础容器&#xff08;infrastructure container&#xff09;5.2 初始化容器&#xff08…...

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

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

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

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

新知识：Monkey 改进版之 App Crawler

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

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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/10/3 18:03:02

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/10/2 7:54:38

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/10/2 2:19:09

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/9/28 3:57:56

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/7/27 0:21:52

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/9/28 3:33:27

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2025/9/22 23:42:30

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/7/14 0:13:22