【Java 进阶篇】CSS 选择器详解

news2024/9/29 5:29:29

在这里插入图片描述

CSS（层叠样式表）是一种用于描述网页上元素样式的语言。要想有效地使用CSS，了解CSS选择器是至关重要的，因为它们允许你选择要应用样式的HTML元素。在本文中，我们将详细介绍CSS选择器的各种类型和用法，以便你能够更好地掌握这一关键概念。

1. 什么是CSS选择器？

CSS选择器是一种模式，用于选择HTML文档中的一个或多个元素，并为这些元素应用样式。选择器基于元素的标签名称、类、ID、属性等特征来选择元素。通过选择器，你可以精确地定义哪些元素将受到样式的影响。

2. 基本选择器

2.1 标签选择器

标签选择器是最简单的选择器，它通过HTML元素的标签名称来选择元素。例如，要选择所有段落元素 <p> 并将它们的文字颜色设置为红色，可以使用以下样式：

p {
  color: red;
}

这将使所有段落文本变为红色。

2.2 类选择器

类选择器允许你选择具有特定类名的元素。类选择器以点 . 开头，后面跟随类名。例如，要选择所有具有 button 类的按钮元素，并将它们的背景颜色设置为蓝色，可以使用以下样式：

.button {
  background-color: blue;
}

2.3 ID选择器

ID选择器允许你选择具有特定ID属性的元素。ID选择器以井号 # 开头，后面跟随ID名称。ID在整个HTML文档中应该是唯一的。例如，要选择具有 header ID的标题元素，并将它们的字体大小设置为24像素，可以使用以下样式：

#header {
  font-size: 24px;
}

3. 复合选择器

复合选择器允许你组合多个选择器，以便更精确地选择元素。以下是一些常见的复合选择器：

3.1 后代选择器

后代选择器（空格）允许你选择嵌套在其他元素内部的元素。例如，要选择所有在 <div> 元素内部的段落元素，并将它们的文字颜色设置为绿色，可以使用以下样式：

div p {
  color: green;
}

3.2 子选择器

子选择器（>）允许你选择作为另一个元素的直接子元素的元素。例如，要选择所有 <ul> 元素下的直接子元素 <li> 并将它们的文本颜色设置为橙色，可以使用以下样式：

ul > li {
  color: orange;
}

3.3 相邻兄弟选择器

相邻兄弟选择器（+）允许你选择与另一个元素相邻的元素。例如，要选择所有紧跟在标题元素 <h2> 后面的段落元素 <p> 并将它们的字体设置为斜体，可以使用以下样式：

h2 + p {
  font-style: italic;
}

3.4 通用兄弟选择器

通用兄弟选择器（~）允许你选择与另一个元素具有相同父元素的所有元素。例如，要选择所有与标题元素 <h2> 具有相同父元素的段落元素 <p> 并将它们的文字颜色设置为灰色，可以使用以下样式：

h2 ~ p {
  color: gray;
}

4. 属性选择器

属性选择器允许你选择具有特定属性的元素。属性选择器使用方括号 []，并在方括号内指定要匹配的属性和属性值。以下是一些常见的属性选择器示例：

4.1 属性选择器

属性选择器允许你选择具有特定属性的元素。属性选择器使用方括号 []，并在方括号内指定要匹配的属性和属性值。以下是一些常见的属性选择器示例：

4.1.1 属性存在选择器

属性存在选择器（[attribute]）用于选择具有指定属性的所有元素，而不考虑其值。例如，要选择所有具有 title 属性的元素，并将它们的背景颜色设置为黄色，可以使用以下样式：

[title] {
  background-color: yellow;
}
4.1.2 属性值精确匹配选择器

属性值精确匹配选择器（[attribute=value]）用于选择具有指定属性和精确属性值的元素。例如，要选择所有 type 属性值为 text 的输入框元素，并将它们的边框颜色设置为蓝色，可以使用以下样式：

input[type="text"] {
  border-color: blue;
}
4.1.3 属性值前缀匹配选择器

属性值前缀匹配选择器（[attribute^=value]）用于选择具有指定属性且属性值以指定值开头的元素。例如，要选择所有 src 属性值以 https 开头的图片元素，并将它们的边框颜色设置为绿色，可以使用以下样式：

img[src^="https"] {
  border-color: green;
}
4.1.4 属性值后缀匹配选择器

属性值后缀匹配选择器（[attribute$=value]）用于选择具有指定属性且属性值以指定值结尾的元素。例如，要选择所有 href 属性值以 .pdf 结尾的链接元素，并将它们的文本颜色设置为红色，可以使用以下样式：

a[href$=".pdf"] {
  color: red;
}
4.1.5 属性值包含匹配选择器

属性值包含匹配选择器（[attribute*=value]）用于选择具有指定属性且属性值包含指定值的元素。例如，要选择所有 class 属性值包含 active 的元素，并将它们的背景颜色设置为橙色，可以使用以下样式：

[class*="active"] {
  background-color: orange;
}

5. 伪类选择器

伪类选择器允许你选择处于特定状态或位置的元素，而不是基于元素的属性或标签名称。以下是一些常见的伪类选择器示例：

5.1 链接伪类选择器

链接伪类选择器用于选择链接元素的不同状态。例如，要选择未被访问的链接并将其颜色设置为蓝色，可以使用以下样式：

a:link {
  color: blue;
}

同样，你还可以使用 :visited 伪类选择已访问的链接。

5.2 :hover 伪类选择器

:hover 伪类选择器用于选择鼠标悬停在元素上时的状态。例如，要选择鼠标悬停在按钮元素上时，并将其背景颜色设置为浅灰色，可以使用以下样式：

button:hover {
  background-color: lightgray;
}

5.3 :nth-child 伪类选择器

:nth-child 伪类选择器用于选择一组元素中的第 n 个元素。例如，要选择每个列表中的第偶数个列表项，并将它们的文本颜色设置为绿色，可以使用以下样式：

li:nth-child(even) {
  color: green;
}

5.4 :not 伪类选择器

:not 伪类选择器用于选择不匹配某一条件的元素。例如，要选择除了具有类名 special 的元素之外的所有段落元素，并将它们的字体颜色设置为蓝色，可以使用以下样式：

p:not(.special) {
  color: blue;
}

5.5 :first-child 伪类选择器

:first-child 伪类选择器用于选择一组元素中的第一个元素。例如，要选择每个列表中的第一个列表项，并将它们的文本颜色设置为红色，可以使用以下样式：

li:first-child {
  color: red;
}

6. 伪元素选择器

伪元素选择器允许你选择元素的特定部分，而不是整个元素。以下是一些常见的伪元素选择器示例：

6.1 ::before 和 ::after 伪元素选择器

::before 和 ::after 伪元素选择器用于在元素的内容之前或之后插入虚拟的元素。这些虚拟元素可以用来添加装饰性内容。例如，要在每个段落之前添加一个引号图标，可以使用以下样式：

p::before {
  content: "\201C"; /* Unicode编码表示左双引号 */
}

6.2 ::first-letter 伪元素选择器

::first-letter 伪元素选择器用于选择元素的第一个字母或字符。例如，要选择每个段落的第一个字母并将其设置为大写，可以使用以下样式：

p::first-letter {
  text-transform: uppercase;
}

6.3 ::first-line 伪元素选择器

::first-line 伪元素选择器用于选择元素的第一行文本。例如，要选择每个段落的第一行文本并将其设置为斜体，可以使用以下样式：

p::first-line {
  font-style: italic;
}

7. 结合选择器

你可以结合多个选择器来更精确地选择元素。这是一些常见的结合选择器的示例：

7.1 选择多个类名

如果一个元素具有多个类名，你可以将它们组合在一起选择。例如，要选择具有 btn 和 primary 两个类名的按钮元素，并将其背景颜色设置为蓝色，可以使用以下样式：

.button.primary {
  background-color: blue;
}

7.2 选择特定标签下的元素

你可以结合标签选择器和类选择器来选择特定标签下的元素。例如，要选择 <div> 元素内部的具有 info 类名的段落元素，并将其文字颜色设置为绿色，可以使用以下样式：

div .info {
  color: green;
}

7.3 复杂的选择器组合

你可以结合多个选择器来创建更复杂的选择器组合。例如，要选择具有 main ID 的 <div> 元素内部的所有直接子元素 <p>，并将它们的字体颜色设置为蓝色，可以使用以下样式：

div#main > p {
  color: blue;
}

8. 总结

CSS选择器是CSS中非常重要的概念，它们允许你选择要应用样式的HTML元素。本文介绍了各种类型的选择器，包括基本选择器、复合选择器、属性选择器、伪类选择器和伪元素选择器，以及如何结合它们来更精确地选择元素。通过深入了解这些选择器，你将能够更好地掌握CSS并创建精美的网页布局和样式。希望这篇文章对你有所帮助！

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1077881.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

并不止于表面理论和简单示例——《Python数据科学项目实战》

并不止于表面理论和简单示例——《Python数据科学项目实战》

Python 现在可以说是运用最广泛的编程语言之一&#xff0c;使用 Python 的人不只局限在计算机相关专业的从业者,很多来自金融领域、医疗领域以及其他我们无法想象的领域的人,每天都在使用 Python处理各种数据、使用机器学习进行预测以及完成各种有趣的工作。 长久以来&#xff…
阅读更多...
济南建筑模板生产厂家有哪些？

济南建筑模板生产厂家有哪些？

在济南地区&#xff0c;寻找一家可靠的建筑模板供应商对于建筑施工企业来说是至关重要的。在众多的厂家中&#xff0c;广西贵港市能强优品木业是济南地区建筑模板最具实力的供应商之一。他们不仅提供高质量的建筑模板&#xff0c;还能提供整车物流包运输&#xff0c;并将货物发…
阅读更多...
android app开发环境搭建

android app开发环境搭建

Android是流行的移动设备原生应用开发平台&#xff0c;其支持Java语言以及Kotlin语言的开发环境&#xff0c;本文主要描述官方提供的Android studio集成开发环境搭建。 https://developer.android.google.cn/ 如上所示&#xff0c;从官方上下载最新版本的Android studio集成开…
阅读更多...
C++ 修改文件创建时间、修改时间属性

C++ 修改文件创建时间、修改时间属性

简介 修改文件创建时间、修改时间、大小等属性。 博客 《C 获取文件创建时间、修改时间、大小等属性》分享后&#xff0c;好兄弟“古月”发来一段代码&#xff0c;说可以修改文件的创建时间等。测试了一下真可以&#xff0c;下面是运行效果和代码&#xff1a; 代码 #i…
阅读更多...
mysql面试题35：MySQL有关权限的表有哪些？

mysql面试题35：MySQL有关权限的表有哪些？

该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点 面试官：MySQL有关权限的表有哪些？ MySQL中与权限相关的表主要包括以下几个： user表：存储MySQL用户的基本信息，包括用户名、密码等。可以使用以下命令…
阅读更多...
用于物体识别和跟踪的下游任务自监督学习-2-背景

用于物体识别和跟踪的下游任务自监督学习-2-背景

2.1用于现实世界应用的计算机视觉的基本概念 有许多中间步骤涉及应用计算机视觉算法来解决现实世界中的问题。机器视觉算法从光学传感器的图像采集开始，并最终解决现实世界的决策任务，如自动驾驶汽车、机器人自动化和监控。设计现代计算机视觉算法包括传感器数据编码、解码、…
阅读更多...
Practical Memory Leak Detection using Guarded Value-Flow Analysis 论文阅读

Practical Memory Leak Detection using Guarded Value-Flow Analysis 论文阅读

本文于 2007 年投稿于 ACM-SIGPLAN 会议1。 概述 指针在代码编写过程中可能出现以下两种问题&#xff1a; 存在一条执行路径&#xff0c;指针未成功释放&#xff08;内存泄漏&#xff09;&#xff0c;如下面代码中注释部分所表明的&#xff1a; int foo() {int *p malloc(4 …
阅读更多...
PointRend: 将图像分割视为渲染——PointRend:Image Segmentation as Rendering

PointRend: 将图像分割视为渲染——PointRend:Image Segmentation as Rendering

0.摘要 我们提出了一种新的方法&#xff0c;用于高效、高质量的对象和场景图像分割。通过将经典的计算机图形学方法与像素标记任务中面临的过采样和欠采样挑战进行类比&#xff0c;我们开发了一种将图像分割视为渲染问题的独特视角。基于这个视角&#xff0c;我们提出了PointRe…
阅读更多...
昂首资本通过套期保值，MT4和MT5这样选

昂首资本通过套期保值，MT4和MT5这样选

对冲模式允许交易者为一项资产开立任意数量的头寸&#xff0c;但只能进行多单交易&#xff0c;无法改变开仓的成交量。 套期保值系统由MT4和MT5两款软件提供支持&#xff0c;自2016年起&#xff0c;套期保值系统由MT5取代了MT4。净额结算模式允许交易者一次只有一个金融工具的…
阅读更多...
TensorRT的结构

TensorRT的结构

Builder&#xff08;网络原数据&#xff09;&#xff1a;模型搭建的入口&#xff0c;网络的tensorRT内部表示以及可执行程序引擎都是由该对象的成员方法生成的 BuiderConfig&#xff08;网络原数据的选项&#xff09;&#xff1a;负责设置模型的一些参数&#xff0c;如是否开始…
阅读更多...
R语言R包详解——stringr包：字符处理

R语言R包详解——stringr包：字符处理

R语言 R语言R包详解——stringr包&#xff1a;字符处理 一切用法皆以说明书为准&#xff0c;想要了解该包&#xff0c;请多查阅说明书或者查看底层算法。 文章目录 R语言一、安装与加载R包二、函数简介三、函数详解3.1、str_c: 字符串拼接3.2、str_trim: 去掉字符串的空格和TA…
阅读更多...
2核4G服务器支持多少用户同时在线访问？卡不卡？

2核4G服务器支持多少用户同时在线访问？卡不卡？

腾讯云轻量2核4G5M带宽服务器支持多少人在线访问&#xff1f;5M带宽下载速度峰值可达640KB/秒&#xff0c;阿腾云以搭建网站为例&#xff0c;假设优化后平均大小为60KB&#xff0c;则5M带宽可支撑10个用户同时在1秒内打开网站&#xff0c;从CPU内存的角度&#xff0c;网站程序效…
阅读更多...
Java 19的未来：新特性、性能优化和更多

Java 19的未来：新特性、性能优化和更多

文章目录 新特性的引入1. 模式匹配的扩展2. 增强的模式匹配异常处理3. 基于记录的反射4. 引入静态方法的接口 性能优化1. 垃圾收集器的改进2. 即时编译器的增强3. 并行处理的改进 Java编程的前景展望1. 更多的应用场景2. 更强的生态系统3. 更广泛的社区参与4. 面向未来的编程 结…
阅读更多...
【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.5 键盘事件

【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.5 键盘事件

本章要实现的整体效果如下&#xff1a; QEvent::KeyPress ​ 键盘按下时&#xff0c;触发该事件&#xff0c;它对应的子类是 QKeyEvent QEvent::KeyRelease ​ 键盘抬起时&#xff0c;触发该事件&#xff0c;它对应的子类是 QKeyEvent 本节通过两个案例来讲解这 2 个事件&…
阅读更多...
C++学习day4

C++学习day4

作业&#xff1a; 1> 思维导图 2> 整理代码 1. 拷贝赋值函数课上代码 //拷贝赋值函数课上代码 #include<iostream> using namespace std;//创建类 class Stu { private://私有的string name;int socer;int *age;//此处注意用到指针类型 public://共有的//无参构…
阅读更多...
爬取微博热榜并将其存储为csv文件

爬取微博热榜并将其存储为csv文件

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言1.…
阅读更多...
每日leetcode_193二叉搜索树的最近公共祖先

每日leetcode_193二叉搜索树的最近公共祖先

每日leetcode_193二叉搜索树的最近公共祖先 记录自己的成长&#xff0c;加油。 题目出处&#xff1a;LCR 193. 二叉搜索树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09; 题目 思路&#xff1a; 解题 class Solution {public TreeNode lowestCommonAncestor(TreeNod…
阅读更多...
孙帅Spring源码

孙帅Spring源码

【视频来源于&#xff1a;B站up主孙帅suns Spring源码视频】【微信号&#xff1a;suns45】
阅读更多...
【二维前缀和】

【二维前缀和】

目录 一、题目解析二、算法原理三、代码实现 一、题目解析 二、算法原理 三、代码实现 #include <iostream> using namespace std; #include<vector> int main() {int n0,m0,q0;cin>>n>>m>>q;vector<vector<int>> arr(n1,vector&l…
阅读更多...
Easysearch Chart 0.2.0都有哪些变化

Easysearch Chart 0.2.0都有哪些变化

Easysearch Chart 包更新了&#xff0c;让我们来看看都有哪些变化&#xff1a; Docker 镜像升级 Service 名称调整&#xff0c;支持 NodePort 模式部署 现在让我们用 NodePort 模式部署一下&#xff1a; # helm search repo infinilabs NAME CHART VERSION …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023