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

ops/2024/11/24 15:42:15/

从 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 元素，这使得我们能够针对具有相同类别的元素进行样式设置，实现一定程度的差异化和复用性
  • 语法：
html">.类名 {属性名: 属性值;
}
  • 举例：
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>css">/* 定义一个名为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 来精准定位元素）
  • 语法
html">#id名 {属性名: 属性值;
}
  • 举例
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>css">/* 定义一个名为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. 后代选择器

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

语法：

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

举例：

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>css">/* 选择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. 子选择器

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

html">父元素 > 子元素 {属性名: 属性值;
}

html"><style>css">/* 选择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. 相邻兄弟选择器

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

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

举例：

html"> <style>css">/* 选择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>

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

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

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

4.交集选择器

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

语法格式为

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

举例

html"><style>css">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{属性名:属性值;}

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

在这里插入图片描述

6.属性选择器

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

（1）选择具有指定属性的元素

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

在这里插入图片描述

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

html"><style>css">[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）选择具有指定属性且属性值包含特定值

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

在这里插入图片描述

  • [attribute| = value]

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

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>css">[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]
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>css">[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]
html">[src$ = ".jpg"] {border: 1px solid red;
}
<img src="image.jpg" alt="这是JPG图片">
<img src="image.png" alt="这是PNG图片">

在这里插入图片描述

7.伪类选择器

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

常见的伪类选择器及示例

（1）:hover

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

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>css">a:hover {color: orange;}</style>
</head><body><a href="#">这是一个链接</a>
</body></html>

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

在这里插入图片描述

（2）:active

当元素被激活时（例如被点击时）应用样式

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>css">button:active {background-color: yellow;}</style>
</head><body><button>点击我</button>
</body></html>

当按钮被点击（按下鼠标键）时，其背景颜色会变成黄色

在这里插入图片描述

（3）:focus

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

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>css">input:focus {border: 2px solid blue;}</style>
</head><body><input type="text">
</body></html>

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

（4）:first - child

选择元素的第一个子元素

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>css">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

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

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>css">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 可以是数字、关键字

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>css">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

  • 当链接被访问过之后应用样式
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>css">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>

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.ppmy.cn/ops/136329.html

相关文章

Spring框架深度剖析：特性、安全与优化

Spring框架深度剖析：特性、安全与优化

文章目录 Spring框架简介主要特性1. 依赖注入&#xff08;Dependency Injection, DI&#xff09;2. 面向切面编程&#xff08;Aspect-Oriented Programming, AOP&#xff09;3. 声明式事务管理4. 强大的MVC框架5. 集成测试支持6. 多种数据访问技术的支持 安全性1. 认证&#xf…
阅读更多...
网络安全-企业环境渗透2-wordpress任意文件读FFmpeg任意文件读

网络安全-企业环境渗透2-wordpress任意文件读FFmpeg任意文件读

一、 实验名称 企业环境渗透2 二、 实验目的 【实验描述】 操作机的操作系统是kali 进入系统后默认是命令行界面 输入startx命令即可打开图形界面。 所有需要用到的信息和工具都放在了/home/Hack 目录下。 本实验的任务是通过外网的两个主机通过代理渗透到内网的两个主机。…
阅读更多...
鸿蒙NEXT开发案例：数字转中文大小写

鸿蒙NEXT开发案例：数字转中文大小写

【引言】 本应用的主要功能是将用户输入的数字转换为中文的小写、大写及大写金额形式。用户可以在输入框中输入任意数字&#xff0c;点击“示例”按钮可以快速填充预设的数字&#xff0c;点击“清空”按钮则会清除当前输入。转换结果显示在下方的结果区域&#xff0c;每个结果…
阅读更多...
Android mk/bp构建工具介绍

Android mk/bp构建工具介绍

零. 前言 由于Bluedroid的介绍文档有限&#xff0c;以及对Android的一些基本的知识需要了(Android 四大组件/AIDL/Framework/Binder机制/JNI/HIDL等)&#xff0c;加上需要掌握的语言包括Java/C/C等&#xff0c;加上网络上其实没有一个完整的介绍Bluedroid系列的文档&#xff0…
阅读更多...
SpringBoot整合RabbitMQ应用

SpringBoot整合RabbitMQ应用

本文主要介绍SpringBoot中如何使用RabbitMQ&#xff0c;相关概念及基础使用参考RabbitMQ简单使用 常用配置及方法 展示rabbitmq各个模式在springboot中如何使用之前&#xff0c;先介绍rabbitmq在springboot中的一些常用配置及方法&#xff1a; 注册队列 //使用配置类以bean…
阅读更多...
国外云计算服务器租用攻略

国外云计算服务器租用攻略

国外云计算服务器租用需综合考虑服务商信誉、性能配置、价格性价比、合规性与法律风险、技术支持等因素。首先明确业务需求&#xff0c;选择正规、技术实力强的服务商&#xff0c;并考虑地理位置以优化访问速度。其次&#xff0c;根据需求选择合适的CPU、内存、存储和带宽配置&…
阅读更多...
【C++入门(一)】半小时入门C++开发(深入理解new+List+范围for+可变参数)

【C++入门(一)】半小时入门C++开发(深入理解new+List+范围for+可变参数)

目录 一.深入理解new 使用格式 二.List列表 定义一个列表 迭代器 添加元素 删除元素 排序 反转序列 三.范围for 四.可变参数 std::initializer_list 可变参数模板&#xff08;variadic template&#xff09; 一.深入理解new 类似于C语言中的malloc、calloc和reallo…
阅读更多...
局域网协同办公软件，2024安全的协同办公软件推荐

局域网协同办公软件，2024安全的协同办公软件推荐

在2024年&#xff0c;随着数字化转型的深入和远程工作需求的增加&#xff0c;协同办公软件已成为企业提升工作效率、优化沟通流程的重要工具。 以下是一些值得推荐的安全的协同办公软件&#xff1a; 钉钉 功能全面&#xff1a;钉钉是一款综合性极强的企业级协同软件&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023