从 HTML 到 CSS:开启网页样式之旅(二)—— 深入探索 CSS 选择器的奥秘

从 HTML 到 CSS:开启网页样式之旅(二)—— 深入探索 CSS 选择器的奥秘

  • 前言
  • 一、CSS基本选择器
    • 1. 通配选择器
    • 2. 元素选择器
    • 3. 类选择器
    • 4. id选择器
    • 5.基本选择器总结
  • 二、CSS复合选择器
    • 1. 后代选择器
    • 2. 子选择器
    • 3. 相邻兄弟选择器
    • 4.交集选择器
    • 5.并集选择器
    • 6.属性选择器
      • (1)选择具有指定属性的元素
      • (2)选择具有指定属性且属性值等于特定值的元素
      • (3)选择具有指定属性且属性值包含特定值
      • (4)选择具有指定属性且属性值以特定值开头(后面可以跟一个连字符 “-”)的元素。
      • (5) 选择具有指定属性且属性值以特定值开头的元素
      • (6)选择具有指定属性且属性值以特定值结尾的元素
    • 7.伪类选择器
      • 常见的伪类选择器及示例
      • (1):hover
      • (2):active
      • (3):focus
      • (4):first - child
      • (5):last - child
      • (6):nth - child(n)
      • (7):visited
      • (8)常用的
    • 8.伪元素选择器
  • 三、选择器的优先级
    • 1. 优先级基本规则
    • 2. 计算优先级(特异性)


前言

  • 在上一节内容中,我们初步了解了CSS如何引用以及其基本语法规范,接下来要深入探究的便是CSS选择器这一关键部分。
  • CSS选择器犹如一把精准的钥匙能够帮助我们准确地定位到HTML页面中需要添加样式的元素,从而实现对网页样式的精细控制。
下面,就让我们一同揭开CSS选择器的神秘面纱,深入了解其丰富多样的类型和强大功能

一、CSS基本选择器

1. 通配选择器

通配选择器可以选中所有HTML中的元素

语法


* {
属性名: 属性值;
}

例如

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 选中所有元素 */* {color: orange;font-size: 40px;}</style>
</head><body><div><P>张三 :98</P><P>张三 :96</P><P>张三 :99</P><P>张三 :97</P></div>
</body></html>

效果图

在这里插入图片描述

备注:目前来看通配选择器貌似有点鸡肋,但后面清除样式时,会对我们有很大帮助

2. 元素选择器

作用:为页面中 某种元素 统一设置样式。

  • 语法:
标签名 
{ 属性名: 属性值;
}

举例

/* 选中所有段落元素 */
<style>p {color: blue;font-size: 60px;}</style></head><body><span>2</span><div><p>张三 :98</p><p>张三 :96</p><p>张三 :99</p><p>张三 :97</p></div>

效果图
在这里插入图片描述

元素选择器无法实现差异化设置,例如上面的代码中,所有的p元素效果都一样

3. 类选择器

作用:根据元素的class 值,来选中某些元素。

  • 可以选中具有特定类名的 HTML 元素,这使得我们能够针对具有相同类别的元素进行样式设置,实现一定程度的差异化和复用性
  • 语法:
.类名 {属性名: 属性值;
}
  • 举例:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 定义一个名为highlight的类选择器样式 */.highlight {color: green;font-weight: bold;}</style>
</head><body><div><p class="highlight">张三 :98</p><p>张三 :96</p><p class="highlight">张三 :99</p><p>张三 :97</p></div>
</body></html>
  • 效果图
    在这里插入图片描述

4. id选择器

  • id 选择器用于选中具有特定 id 属性值的 HTML 元素,在一个 HTML 页面中,每个 id 值应该是唯一的,它主要用于对特定的、独一无二的元素进行精准的样式设置或其他操作(比如==通过 JavaScript ==进行交互操作时,常通过 id 来精准定位元素)
  • 语法
#id名 {属性名: 属性值;
}
  • 举例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 定义一个名为unique-element的id选择器样式 */#unique-element {color: purple;background-color: yellow;font-size: 30px;}</style>
</head><body><div><p id="unique-element">张三 :98</p><p>张三 :96</p><p>张三 :99</p><p>张三 :97</p></div>
</body></html>

在这个例子中,我们通过#unique-element这个 id 选择器定义了特定的样式,只有那个 id 属性值为unique-element的<p>元素会应用这些样式,其他元素不受影响

  • 效果图
  • 在这里插入图片描述

5.基本选择器总结

在这里插入图片描述

二、CSS复合选择器

CSS 复合选择器是由基本选择器通过特定的组合方式构成的,它能够更加精准地定位到我们想要设置样式的元素,满足更复杂的页面样式设计需求

1. 后代选择器

  • 后代选择器用于选择某元素的所有后代元素(包括子元素、孙元素等)并设置样式

语法:

祖先元素 后代元素 {属性名: 属性值;
}

举例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 选择div元素下的所有p元素 */div p {color: red;font-size: 25px;}</style>
</head><body><div><p>张三 :98</p><p>张三 :96</p><span><p>张三 :99</p></span><p>张三 :97</p></div><p>这是div外的p元素,不受上述样式影响</p>
</body></html>

在上述代码中,通过div p这个后代选择器,我们为<div>元素内部的所有<p>元素设置了特定的样式(红色文字,字体大小为 25px),而位于<div>元素外部的<p>元素则不会应用这些样式
在这里插入图片描述

2. 子选择器

子选择器用于选择某元素的直接子元素并设置样式,它与后代选择器的区别在于只针对直接子元素,不包括孙元素及更后代的元素

父元素 > 子元素 {属性名: 属性值;
}
<style>/* 选择div元素的直接子p元素 */div > p {color: cyan;font-size: 28px;}</style>
<div><p>张三 :98</p><p>张三 :96</p><span><p>张三 :99</p></span><p>张三 :97</p></div><p>这是div外的p元素,不受上述样式影响</p>

在这里插入图片描述

3. 相邻兄弟选择器

相邻兄弟选择器用于选择紧挨着某元素的下一个兄弟元素并设置样式

元素 + 相邻兄弟元素 {属性名: 属性值;
}

举例:

 <style>/* 选择p元素紧挨着的下一个p元素 */p + p {color: magenta;font-size: 32px;}</style>
</head><body><p>张三 :98</p><p>张三 :96</p><p>张三 :99</p><p>张三 :97</p>
</body>

在这里插入图片描述
在这里插入图片描述

大家想一想第一个为什么显示不出来呢

第一个<p>元素(张三 : 98)没有紧挨着它的前一个<p>元素,因为它是第一个<p>元素。
从第二个<p>元素(张三 : 96)开始,它是第一个<p>元素(张三 : 98)的下一个兄弟元素,所以它会应用p + p选择器的样式

4.交集选择器

交集选择器是由两个或多个选择器通过紧挨着书写来构成的,它会选择同时满足这些选择器条件的元素。只有当一个元素匹配所有组成交集选择器的选择器时,该元素才会被选中并应用样式

语法格式为

选择器1选择器2{属性名:属性值;}

举例

<style>p.highlight {color: green;font - weight: bold;}</style>
</head>
<body><p class="highlight">这是一段带有highlight类的段落,会应用样式。</p><p>这是一段普通段落,不会应用样式。</p><span class="highlight">这是一个带有highlight类的span元素,不会应用样式,因为它不是段落元素。</span>
</body>

在这里插入图片描述

5.并集选择器

并集选择器用于同时选择多个不同的元素,并为它们设置相同的样式。

语法格式为:
选择器1,选择器2,选择器3{属性名:属性值;}

  • 举例
 p,span{color: red;font - size: 20px;}</style>
</head>
<body><p>这是一个段落。</p><span>这是一个span元素。</span><div>这是一个div元素,不受影响。</div>
</body>

在这里插入图片描述

6.属性选择器

属性选择器是 CSS 中用于根据元素的属性及其属性值来选择元素的一种选择器。它允许你通过检查 HTML 元素是否具有特定属性或特定属性值来选择元素,并为其设置样式

(1)选择具有指定属性的元素

[title] {color: green;
}
<p title="这是一个段落">这是有title属性的段落</p>
<p>这是没有title属性的段落</p>

在这里插入图片描述

(2)选择具有指定属性且属性值等于特定值的元素

<style>[class="highlight"] {color: red;font - weight: bold;}<p title="这是一个段落">这是有title属性的段落</p><p>这是没有title属性的段落</p></style>
</head>
<p class="highlight">这是带有highlight类的段落</p>
<p class="other">这是带有other类的段落</p>

在这里插入图片描述

  • [attribute~ = value]

(3)选择具有指定属性且属性值包含特定值

 [class ~= "important"] {background-color: yellow;
}</style>
</head>
<p class="important urgent">这个段落有important和urgent类</p>
<p class="urgent">这个段落只有urgent类</p>

在这里插入图片描述

  • [attribute| = value]

(4)选择具有指定属性且属性值以特定值开头(后面可以跟一个连字符 “-”)的元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><style>[lang|="en"] {font-style: italic;}</style>
</head><body> <p lang="en">这是英文段落</p><p lang="en-us">这是美式英文段落</p> <p lang="fr">这是法文段落</p>
</body></html>

在这里插入图片描述

(5) 选择具有指定属性且属性值以特定值开头的元素

  • [attribute^ = value]
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><style>[href ^= "https://"] {color: blue;
}</style>
</head><body> <a href="https://www.example.com">这是一个https链接</a>
<a href="http://www.other.com">这是一个http链接</a>
</body></html>

在这里插入图片描述

(6)选择具有指定属性且属性值以特定值结尾的元素

  • [attribute* = value]
[src$ = ".jpg"] {border: 1px solid red;
}
<img src="image.jpg" alt="这是JPG图片">
<img src="image.png" alt="这是PNG图片">

在这里插入图片描述

7.伪类选择器

  • 伪类选择器是 CSS 中一种特殊的选择器,它根据元素的特定状态或位置等条件来选择元素,而不是基于元素的实际标记或属性。通过伪类选择器,可以为处于不同状态下的元素设置不同的样式,增强用户交互体验

常见的伪类选择器及示例

(1):hover

当鼠标悬停在元素上时应用样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a:hover {color: orange;}</style>
</head><body><a href="#">这是一个链接</a>
</body></html>

当鼠标悬停在<a>链接元素上时,其文字颜色会变成橙色。

在这里插入图片描述

(2):active

当元素被激活时(例如被点击时)应用样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>button:active {background-color: yellow;}</style>
</head><body><button>点击我</button>
</body></html>

当按钮被点击(按下鼠标键)时,其背景颜色会变成黄色

在这里插入图片描述

(3):focus

当元素获得焦点时(例如表单元素被选中准备输入时)应用样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input:focus {border: 2px solid blue;}</style>
</head><body><input type="text">
</body></html>

<input>文本框获得焦点(用户点击准备输入)时,其边框会变成 2px 宽的蓝色边框
在这里插入图片描述

(4):first - child

选择元素的第一个子元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul li:first-child {font-weight: bold;}</style>
</head><body><ul><li>第一个列表项</li><li>第二个列表项</li><li>第三个列表项</li></ul>
</body></html>

在无序列表<ul>中,第一个<li>列表项的文字会加粗显示

(5):last - child

选择元素的最后一个子元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ol li:last-child {color: green;}</style>
</head><body><ol><li>第一个有序列表项</li><li>第二个有序列表项</li><li>第三个有序列表项</li></ol>
</body></html>

在有序列表<ol>中,最后一个<li>列表项的文字颜色会变成绿色
在这里插入图片描述

(6):nth - child(n)

选择元素的第 n 个子元素。这里的 n 可以是数字、关键字

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>tr:nth-child(even) {background-color: #f2f2f2;}</style>
</head><body><table><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr><tr><td>第三行第一列</td><td>第二行第二列</td></tr></table>
</body></html>

在表格

中,偶数行(第 2、4、6 等行)的元素背景颜色会变成浅灰色(#f2f2f2)
在这里插入图片描述

(7):visited

  • 当链接被访问过之后应用样式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>tr:nth-child(even) {background-color: #f2f2f2;}</style>
</head><body><table><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr><tr><td>第三行第一列</td><td>第二行第二列</td></tr></table>
</body></html>
当用户访问过<a>链接指向的网址后,再次看到该链接时,其文字颜色会变成紫色

在这里插入图片描述

(8)常用的

在这里插入图片描述

8.伪元素选择器

作用:选中元素中的一些特殊位置

在这里插入图片描述

三、选择器的优先级

通过不同的选择器,选中相同的元素 ,并且为相同的样式名设置不同的值时,就发生了样式的冲突。

  • 到底应用哪个样式,此时就需要看优先级了

1. 优先级基本规则

  • 内联样式大于
  • id 选择器大于
  • 类选择器和伪类选择器大于
  • 元素选择器

2. 计算优先级(特异性)

除了上面根据选择器类型判断优先级,还可以通过计算特异性来更准确确定优先级。

  • id 选择器:每有一个 id 选择器,特异性值加 100。
  • 类选择器、伪类选择器、属性选择器:每有一个,特异性值加 10。
  • 元素选择器、伪元素选择器:每有一个,特异性值加 1。
    比如选择器组合#mainDiv.myClass p:hover
  • 这里有 1 个 id 选择器#mainDiv(特异性值 100)、
  • 1 个类选择器.myClass(特异性值 10)、
  • 1 个伪类选择器p:hover(特异性值 10),
  • 总共特异性值是 120。

当和其他选择器比较对同一个元素设置样式时,特异性值高的那个选择器的样式会优先应用


本节内容到此结束,喜欢的话记得三连哦
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/a3728c9d46b640688b9bc99d8a587264.gif#pic_center)

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python的3D可视化库 - vedo (2)visual子模块 基本可视化行为

文章目录 1. visual模块的继承关系2. 基类CommonVisual的方法2.1 获取对象信息2.1.1 对象本身信息2.1.2 对象的查找表2.1.3 对象标量范围2.1.4 对象缩略图 2.2 呈现对象2.2.1 在窗口显示1.2.2 对象可见性 2.2.3 对象颜色2.2.4 对象透明度 2.3 添加标度条2.3.1 2D标度条2.3.2 3D…

Typora+PicGo+云服务器搭建博客图床

文章目录 前言一. 为什么要搭建博客图床&#xff1f;1.1 什么是图床&#xff1f;1.2 为什么要搭建博客图床? 二. 安装软件三. 配置阿里云OSS3.1 注册,开通对象储存3.2 创建bucket3.3 找到你的地域节点3.4 accessKeyId和accessKeySecret3.5 给你的阿里云账户充值 四. 配置4.1 配…

下载安装Android Studio

&#xff08;一&#xff09;Android Studio下载地址 https://developer.android.google.cn/studio 滑动到 点击下载文档 打开新网页 切换到english ![](https://i-blog.csdnimg.cn/direct/b7052b434f9d4418b9d56c66cdd59fae.png 等待一会&#xff0c;出现 点同意后&#xff0…

【LSTM实战】跨越千年,赋诗成文:用LSTM重现唐诗的韵律与情感

本文将介绍如何使用LSTM训练一个能够创作诗歌的模型。为了训练出效果优秀的模型&#xff0c;我整理了来自网络的4万首诗歌数据集。我们的模型可以直接使用预先训练好的参数&#xff0c;这意味着您无需从头开始训练&#xff0c;即可在自己的电脑上体验AI作诗的乐趣。我已经为您准…

大语言模型---梯度的简单介绍;梯度的定义;梯度计算的方法

1. 梯度介绍 如果我们在一座山上&#xff08;一个山的坡度有很多&#xff0c;陡峭的&#xff0c;平缓的&#xff09;&#xff0c;想要从山顶下山。而梯度就像告诉我们如何沿着最陡的下坡路线走&#xff0c;以尽快到达山脚&#xff08;最低点&#xff09;。 2. 梯度的定义 梯度…

鸿蒙学习高效开发与测试-测试工具(5)

文章目录 1、单元测试2、集成测试1. UI 测试框架2. DevEco Testing 测试平台2.1 稳定性测试2.2 场景化性能测试2.3 回归测试2.4 基础质量测试服务3. 命令行测试工具3.1 DevEco Testing SmartPerf3.2 DevEco Testing wukong3、专项测试1. 应用与服务体检2. 专项测试云测平台鸿蒙…

NFS搭建

NFS搭建 单节点安装配置服务器安装配置启动并使NFS服务开机自启客户端挂载查看是否能发现服务器的共享文件夹创建挂载目录临时挂载自动挂载 双节点安装配置服务器安装配置服务端配置NFS服务端配置Keepalived编辑nfs_check.sh监控脚本安装部署RsyncInofity 客户端 单节点安装配置…

基于CNN+RNNs(LSTM, GRU)的红点位置检测(pytorch)

1 项目背景 需要在图片精确识别三跟红线所在的位置&#xff0c;并输出这三个像素的位置。 其中&#xff0c;每跟红线占据不止一个像素&#xff0c;并且像素颜色也并不是饱和度和亮度极高的红黑配色&#xff0c;每个红线放大后可能是这样的。 而我们的目标是精确输出每个红点的…

使用 Elastic 收集 Windows 遥测数据:ETW Filebeat 输入简介

作者&#xff1a;来自 Elastic Chema Martinez 在安全领域&#xff0c;能够使用 Windows 主机的系统遥测数据为监控、故障排除和保护 IT 环境开辟了新的可能性。意识到这一点&#xff0c;Elastic 推出了专注于 Windows 事件跟踪 (ETW) 的新功能 - 这是一种强大的 Windows 原生机…

leetcode刷题记录(四十二)——101. 对称二叉树

&#xff08;一&#xff09;问题描述 . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/symmetric-tree/description/给你…

LeetCode 力扣 热题 100道(九)反转链表(C++)

给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 方法一&#xff1a;迭代法 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNod…

取电快充协议芯片,支持全协议、内部集成LDO支持从UART串口读取电压电流消息

H004D 是一款支持全协议的受电端诱骗取电协议芯片&#xff0c;支持宽电压输入 3.3V~30V&#xff0c;芯片内部集成LDO&#xff0c;可输出 3.3V电压, 支持 通过UART 串口读取电压电流&#xff0c;支持定制功能&#xff0c;芯片采用QFN_20封装&#xff0c;线路简单&#xff0c;芯片…

FreeRTOS——事件标志组

一、概念与应用 1.1概念 事件是实现任务与任务或任务与中断间 通信的机制&#xff0c;用于同步&#xff0c;无数据传输。&#xff08;注意与二值信号量区分&#xff09; 与信号量不同的是&#xff0c;事件可以实现一对多、多对多的同步&#xff0c;即一个任务可以等待多个事…

window11编译pycdc.exe

一、代码库和参考链接 在对python打包的exe文件进行反编译时&#xff0c;会使用到uncompyle6工具&#xff0c;但是这个工具只支持python3.8及以下&#xff0c;针对更高的版本的python则不能反编译。 关于反编译参考几个文章&#xff1a; Python3.9及以上Pyinstaller 反编译教…

【100ask】IMX6ULL开发板用SPI驱动RC522模块

目录 一、问题汇总&#xff1a; 1.无法寻卡 2.寻卡不稳定 二、修改设备树 三、驱动程序 四、测试程序 1.rc522_ap.c 2.rc522_app.h 3.rc522_test.c 4.Makefile 前言&#xff1a; CSDN上大部分对于RC522的文章都是正点的&#xff0c;虽然文章写的挺详细&#xff0c;两…

springboot购物推荐网站的设计与实现(代码+数据库+LW)

摘要 随着信息互联网购物的飞速发展&#xff0c;一般企业都去创建属于自己的电商平台以及购物管理系统。本文介绍了东大每日推购物推荐网站的开发全过程。通过分析企业对于东大每日推购物推荐网站的需求&#xff0c;创建了一个计算机管理东大每日推购物推荐网站的方案。文章介…

小R的二叉树探险 | 模拟

问题描述 在一个神奇的二叉树中&#xff0c;结构非常独特&#xff1a; 每层的节点值赋值方向是交替的&#xff0c;第一层从左到右&#xff0c;第二层从右到左&#xff0c;以此类推&#xff0c;且该二叉树有无穷多层。 小R对这个二叉树充满了好奇&#xff0c;她想知道&#xf…

高精度计算题目合集

高精度计算题目合集 1168&#xff1a;大整数加法 1168&#xff1a;大整数加法 1168&#xff1a;大整数加法 高精度加法原理&#xff1a; a&#xff0c;b&#xff0c;c 都可以用数组表示。这些都是基于c语言的算术运算符形成的运算。 c 3 ( c 1 c 2 ) % 10 c_3(c_1c_2)\%1…

【2024APMCM亚太赛A题】完整参考论文与代码分享

A题 一、问题重述二、问题分析问题一&#xff1a;水下图像分类问题二&#xff1a;退化原因建模问题三&#xff1a;针对单一退化的图像增强方法问题四&#xff1a;复杂场景的综合增强模型问题五&#xff1a;针对性增强与综合增强的比较 三、问题假设退化特征独立性假设物理模型普…

VMware虚拟机(Ubuntu或centOS)共享宿主机网络资源

VMware虚拟机(Ubuntu或centOS)共享宿主机网络资源 由于需要在 Linux 环境下进行一些测试工作&#xff0c;于是决定使用 VMware 虚拟化软件来安装 Ubuntu 24.04 .1操作系统。考虑到测试过程中需要访问 Github &#xff0c;要使用Docker拉去镜像等外部网络资源&#xff0c;因此产…