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

CSS—选择器

news 2026/4/22 18:13:24

目录

一、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

告别WPS与Office兼容性噩梦：用Aspose.Words生成Word/PDF时统一页码的终极方案

跨平台文档兼容性实战&#xff1a;用Aspose.Words解决WPS与Office页码差异问题 在文档自动化生成领域&#xff0c;最令人头疼的莫过于同一份文件在不同办公软件中显示不一致。特别是当目录页码在WPS中比Microsoft Office少一页时&#xff0c;不仅影响专业形象&#xff0c;更会导…...

编程新知 2026/4/22 17:29:30

手把手教你用Python脚本绕过SQL过滤，在BUUCTF靶场实战GetShell

Python自动化SQL注入&#xff1a;从字符编码到实战GetShell的高级技巧 在CTF竞赛中&#xff0c;SQL注入始终是Web安全赛道的核心考点。当面对严格的关键词过滤时&#xff0c;传统的手工注入往往举步维艰。本文将深入探讨如何通过Python脚本自动化构造char()编码Payload&#xf…...

编程新知 2026/4/22 16:56:04

Phi-mini-MoE-instruct效果实测：长文本摘要+关键信息抽取双任务

Phi-mini-MoE-instruct效果实测&#xff1a;长文本摘要关键信息抽取双任务 1. 模型概览 Phi-mini-MoE-instruct是一款轻量级混合专家&#xff08;MoE&#xff09;指令型小语言模型&#xff0c;在多项基准测试中展现出卓越性能&#xff1a; 代码能力&#xff1a;在RepoQA、Hu…...

编程新知 2026/4/22 16:35:13

logo抠图背景去不掉？PS 4种方法一键搞定

抠图是设计师必备的基础技能&#xff0c;但很多新手在处理logo抠图时&#xff0c;总会遇到各种问题&#xff1a;复杂背景的logo抠半天&#xff0c;边缘留灰边、丢失细节&#xff1b;面对PS众多工具&#xff0c;无从下手、反复试错。今天就给大家分享3种PS logo抠图去背景的实用…...

编程新知 2026/4/22 16:22:04

向量相似度查询总超时？内存暴涨？EF Core 10向量扩展的7个隐藏坑位，92%开发者第3个就踩中！

第一章&#xff1a;EF Core 10向量扩展的底层架构与设计边界EF Core 10 引入的向量扩展并非简单叠加的 ORM 功能补丁&#xff0c;而是深度耦合于查询管道&#xff08;Query Pipeline&#xff09;与表达式树编译器的系统级增强。其核心依托于三个关键组件&#xff1a;向量表达式…...

编程新知 2026/4/22 16:13:02

3分钟掌握Unlock-Music：免费音乐解密工具的完整使用指南

3分钟掌握Unlock-Music&#xff1a;免费音乐解密工具的完整使用指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址: htt…...

编程新知 2026/4/22 15:58:42

告别CAPL定时器不稳！用Python-can+PCAN-USB PRO实现稳定CAN FD报文发送的保姆级教程

告别CAPL定时器不稳&#xff01;用Python-canPCAN-USB PRO实现稳定CAN FD报文发送的保姆级教程 在汽车电子测试领域&#xff0c;CAN FD总线的高效性和稳定性对ECU负载测试至关重要。许多工程师习惯使用CAPL脚本进行报文发送&#xff0c;却常常被其定时器抖动问题困扰——周期发…...

编程新知 2026/4/22 14:26:50

SAP RFC接口改造记：避开WebService，用OData+Python实现轻量级跨系统调用

SAP RFC接口轻量化改造&#xff1a;用ODataPython构建跨系统调用新范式 当企业数字化进程加速&#xff0c;SAP系统与外部应用的集成需求呈指数级增长。传统RFC调用虽稳定但笨重&#xff0c;WebService方案又常受环境限制——这恰是OData协议大显身手的战场。本文将揭示如何用P…...

编程新知 2026/4/22 14:15:14

一键免费下载30+文档平台：kill-doc浏览器脚本完全指南

一键免费下载30文档平台&#xff1a;kill-doc浏览器脚本完全指南 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档&#xff0c;但是相关网站浏览体验不好各种广告&#xff0c;各种登录验证&#xff0c;需要很多步骤才能下载文档&#xff0c;该脚本就是为了解…...

编程新知 2026/4/22 14:15:14

告别电网波动烦恼：手把手教你用双二阶广义积分锁相（DSOGI-PLL）搞定三相PWM整流器

电网谐波抑制实战&#xff1a;基于DSOGI-PLL的三相整流器高精度锁相技术 当你在调试一台三相PWM整流器时&#xff0c;突然发现电网电压出现10%的跌落&#xff0c;设备立即报出"同步失败"故障——这种场景对于电力电子工程师来说再熟悉不过。传统SRF-PLL在理想电网条件…...

编程新知 2026/4/22 13:37:21