16-CSS3新增选择器

知识目标

  • 掌握属性选择器的使用
  • 掌握关系选择器的使用
  • 掌握结构化伪类选择器的使用
  • 掌握伪元素选择器的使用

如何减少文档内class属性和id属性的定义，使文档变得更加简洁？
可以通过属性选择器、关系选择器、结构化伪类选择器、伪元素选择器。

1. 属性选择器

1.1 E[attribute]选择器

E[attribute]选择器用于选取标签名称为E（代指标签名称），并且定义了attribute（代指属性名称）属性的标签。其中，E可以省略，如果省略则表示可以匹配满足条件的任意标签。
例1：选取包含id属性的<div>标签：div[id]
例2：选取包含align属性，属性值为center的全部标签：[align=center]

1.2 E[attribute~=value]选择器

E[attribute~=value]选择器用于选取标签名称为E（代指标签名称），并且定义了attribute（代指属性名称）属性，包含某个value（代指属性值字符）属性值的标签。
E[attribute]选择器和E[attribute~=value]选择器区别在于前者需要属性和属性值完全一致，后者只要标签包含属性值即可被选中。

1.3 E[attribute|=value]

E[attribute|=value]选择器能够选取带有value属性值或以value-开头的属性值的标签，不包括两个属性的标签。
例1： [class|=a] { } 选取属性值为a或属性值以a-开头的标签。一般用于匹配en-US、zh-CN 等。

1.4 E[attribute^=value]

E[attribute^=value]选择器能够选取以value开头的属性值的标签。
例1：选取属性值以one开头的标签 [class ^=one] {}

1.5 E[attribute$=value]

E[attribute$=value]选择器用于选择属性值后缀为value（代指属性值字符）字符的标签。
例1： div[id$=section] 选取包含id属性，且id属性值以section字符串结尾的div标签。

1.6 E[attribute*=value]

E[attribute*=value]选择器用于选择属性值包含value（代指属性值字符）字符的标签。
例1：div[i*=section] 选取包含id属性，且id属性值包含“section”字符的<div>标签

1.7 总结

选择器和作用列表如下：
在这里插入图片描述

2. 关系选择器

2.1 子元素选择器

子元素选择器主要用来选择父级标签的子标签，由符号“>”连接标签名称。
例如：h1>strong选取<h1>标签中的子标签<strong>标签

2.2 兄弟选择器

兄弟选择器可以选择位于同一个父标签中，指定标签后面，具有并列关系的子标签。在CSS3中，兄弟选择器分为邻近兄弟选择器和普通兄弟选择器两种。

2.2.1 邻近兄弟选择器

使用加号**“+”连接前后两个选择器。选择器中的两个子标签从属同一个父标签，而且被选取子标签必须紧跟指定的标签。强调“紧接”，如A+B，选择的B必须是A之后的第一个兄弟元素**。

2.2.2 普通兄弟选择器

使用**“~”**来连接前后两个选择器。选择器中的两个子标签从属同一个父标签，而且被选取子标签需要位于指定的标签后面。如A~B只要B是A后面出现的兄弟都能被选择。

3. 结构化伪类选择器

3.1 :root

:root选择器用于匹配文档根标签，在HTML中，根标签指的<html>标签。因此使用:root选择器定义的样式，对所有页面标签都生效。

3.2 :not

:not选择器可以排除设置的标签或属性。例如，h3:not(.one)会选取没有类名.one的<h3>标签。

3.3 :only-child

:only-child选择器用于选取父标签中的唯一子标签，也就是说，如果某个父标签仅有一个子标签，使用:only-child选择器可以选择这个子标签。例p:only-child能选中我是独生子，而不满足类型的div和多个孩子的标签不能被选中。

<body><div><p>我是独生子</p></div><div><div>我是独生子，是div</div></div><div><p>我是第1个段落</p><p>我是第2个段落</p></div>
</body>

3.4 :first-child

:first-child选择器用于选择父标签中的第一个子标签。

3.5 :last-child

:last-child选择器用于选取父标签中的最后一个子标签。

3.6 :nth-child(n)和nth-last-child(n)

:nth-child(n)选择器用于选择父标签中的第n个子标签。例如：选取父标签中的第2个子标签：:nth-child(2)。
:nth-last-child(n)用于选取父标签中的倒数第n个子标签。
此时还可以使用关键字、公式等进行选择；
比如:nth-child(even), 选择的是偶数孩子。
比如:nth-child(3n), 选择的是3倍数的孩子。

3.7 :first-of-type和:last-of-type

:first-of-type选择器用于匹配父标签中第1个特定类型的子标签。例如p:first-of-type，选择父标签中的第1个p类型的子标签。
:last-of-type选择器用于匹配父标签中最后1个特定类型的子标签。
nth-of-type(n)和nth-child(n)区别：前面的会把指定元素的例子排序序号再选，后面的会先排序，然后看当前的序号孩子是否满足是指定元素。
在这里插入图片描述

4. 伪元素选择器

4.1 :empty

:empty选择器用来选择没有子标签或内容为空的所有标签。

4.2 :target

:target选择器用于突出显示当前活动的目标元素。只有用户单击页面中的超链接，并且跳转到:target选择器控制的元素后，:target选择器所设置的样式才会起作用。

4.3 :before :after

:before选择器 / :after选择器用于在被选取标签的前面/后面插入内容(属于行内元素，在文档中找不到的，称为伪元素)。在使用:before选择器/ :after选择器时必须配合content属性来指定要插入的具体内容。
常用场景：1. 鼠标放上去出现的遮罩、图层 2.
在这里插入图片描述

5. 实践

我会提供代码但会将样式删除，接下来的案例题麻烦大家使用以上述学的知识来补充选择器及样式！！！可以在评论区上传自己的代码和样例截图哦！！！
提供的样例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3 Selectors Example</title><!--  整体页面样式需求：1. 字体使用 Arial 或无衬线字体 2. 行高为 1.6    3. 页面边距为 20px-->
</head><body><!-- h1 样式需求：1. 颜色为 #333     2. 字体大小为 2em   3. 文本居中对齐 4. 文本阴影为 2px 2px 4px rgba(0, 0, 0, 0.1)  --><h1>CSS3 Selectors Example</h1><!-- h2 样式需求：1. 颜色为 #5552. 字体大小为 1.6em3. 底部有 1px 实线的 #ccc 颜色边框4. 底部内边距为 5px --><h2>属性选择器示例</h2><!-- a标签样式需求,可采用E[att="value"]的方式进行选择：1. 颜色为橙色2. 去除下划线3. 字体加粗 --><p>访问 <a href="https://www.example.com" target="_blank">安全网站</a> 获取更多信息。</p><!-- img[src^="images/"] 样式需求：1. 边框为 2px 实线的 #ccc 颜色2. 边框圆角为 5px3. 阴影为 0 0 5px rgba(0, 0, 0, 0.3)--><p><img src="images/sample.jpg" alt="Sample Image"></p><!-- highlight样式需求 采用*= 的方式：1. 背景颜色为黄色2. 字体大小为 1.1em--><p class="highlight">这是一个高亮显示的段落。</p><!-- 样式需求：  采用$=的方式1. 颜色为蓝色2. 字体为斜体--><p>下载 <a href="document.docx">文档</a> 了解详情。</p><!-- important样式需求：  采用~=选择的方式1. 颜色为红色2. 字体加粗3. 有下划线--><p>这里有个 <span class="important">重要</span> 的信息。</p><!-- li[data-lang|="en"] 样式需求：1. 背景颜色为浅蓝色2. 字体大小为 0.9em--><!--  ul 样式需求：1. 列表样式类型为圆形2. 左内边距为 20px--><ul><li data-lang="en-US">英文列表项1</li><li data-lang="fr-FR">法文列表项2</li><li data-lang="en-GB">英文列表项3</li></ul><!-- h3 样式需求：1. 颜色为 #7772. 字体大小为 1.3em--><h3>兄弟选择器示例</h3><!-- h3 + p 样式需求：1. 字体为斜体2. 颜色为 #7773. 字体大小为 0.95em--><p>这是紧跟在h3后面的段落，使用邻兄弟选择器设置样式。</p><!-- h3 ~ ol 样式需求：1. 背景颜色为 #f9f9f92. 边框为 1px 实线的 #ddd 颜色3. 内边距为 10px--><!-- ul li:first-child 样式需求：1. 字体加粗2. 字体大小为 1.1em3. 颜色为 #333--><!-- ul li:last-child 样式需求：1. 有下划线2. 字体为斜体--><!-- ul li:nth-child(3n) 样式需求：背景颜色为 #eee--><!-- ol li:nth-child(even) 样式需求：1. 颜色为紫色2. 字体大小为 1.05em--><!-- ol li:nth-child(odd) 样式需求：颜色为 #555--><!-- ol 样式需求：列表样式类型为大写罗马数字左内边距为 25px--><!-- p 样式需求：颜色为 #666--><ol><li>有序列表项1</li><li>有序列表项2</li><li>有序列表项3</li><li>有序列表项4</li><li>有序列表项5</li></ol><!-- h2 样式需求：同上面的 h2 样式需求--><h2>表格示例</h2><!-- table 样式需求：1. 边框合并，无边框间距2. 宽度为 100%--><!-- th 样式需求：1. 背景颜色为 #f0f0f02. 字体加粗3. 文本居中对齐4. 内边距为 8px--><!-- td 样式需求：1. 边框为 1px 实线的 #ccc 颜色2. 内边距为 8px--><!-- 奇数孩子样式需求：可使用:nth-child(even)的方式 使用背景颜色为 #f9f9f9--><table><thead><tr><th>姓名</th><th>年龄</th><th>职业</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>程序员</td></tr><tr><td>李四</td><td>30</td><td>设计师</td></tr><tr><td>王五</td><td>22</td><td>学生</td></tr></tbody></table><!-- a.info-link 样式需求：1. 颜色为 green2. 文本有下划线--><p>更多信息请访问 <a href="#" class="info-link">这里</a>。</p><!-- span.secondary 样式需求：1. 颜色为 #9992. 字体大小为 0.9em--><p><span class="secondary">这是一段次要信息</span>，需要特殊样式。</p>
</body></html>

需实现的样式如图所示：
在这里插入图片描述

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

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

相关文章

【弹性计算】异构计算云服务和 AI 加速器（四）：FPGA 虚拟化技术

【弹性计算】异构计算云服务和 AI 加速器（四）：FPGA 虚拟化技术

《异构计算云服务和 AI 加速器》系列&#xff0c;共包含以下文章&#xff1a; 异构计算云服务和 AI 加速器&#xff08;一&#xff09;&#xff1a;功能特点异构计算云服务和 AI 加速器&#xff08;二&#xff09;&#xff1a;适用场景异构计算云服务和 AI 加速器&#xff08;…
阅读更多...
Java进阶——位运算

Java进阶——位运算

位运算直接操作二进制位&#xff0c;在处理底层数据、加密算法、图像处理等领域具有高效性能和效率。本文将深入探讨Java中的位运算。 本文目录 一、位运算简介1. 与运算2. 或运算异或运算取反运算左移运算右移运算无符号右移运算 二、位运算的实际应用1. 权限管理2. 交换两个变…
阅读更多...
OpenAI深夜直播「偷袭」谷歌！GPT-4o原生图像生成：奥特曼带梗图，AGI战场再燃战火

OpenAI深夜直播「偷袭」谷歌！GPT-4o原生图像生成：奥特曼带梗图，AGI战场再燃战火

引言&#xff1a;AI战场的「闪电战」 当谷歌刚刚发布「地表最强」Gemini 2.5 Pro时&#xff0c;OpenAI立即以一场深夜直播「闪电反击」——GPT-4o的原生图像生成功能正式上线&#xff01;从自拍变梗图到相对论漫画&#xff0c;奥特曼&#xff08;OpenAI团队&#xff09;用一连…
阅读更多...
鸿蒙harmonyOS：笔记 正则表达式

鸿蒙harmonyOS：笔记 正则表达式

从给出的文本中&#xff0c;按照既定的相关规则&#xff0c;匹配出符合的数据&#xff0c;其中的规则就是正则表达式&#xff0c;使用正则表达式&#xff0c;可以使得我们用简洁的代码就能实现一定复杂的逻辑&#xff0c;比如判断一个邮箱账号是否符合正常的邮箱账号&#xff0…
阅读更多...
[首发]烽火HG680-KD-海思MV320芯片-2+8G-安卓9.0-强刷卡刷固件包

[首发]烽火HG680-KD-海思MV320芯片-2+8G-安卓9.0-强刷卡刷固件包

烽火HG680-KD-海思MV320芯片-28G-安卓9.0-强刷卡刷固件包 U盘强刷刷机步骤&#xff1a; 1、强刷刷机&#xff0c;用一个usb2.0的8G以下U盘&#xff0c;fat32&#xff0c;2048块单分区格式化&#xff08;强刷对&#xff35;盘非常非常挑剔&#xff0c;usb2.0的4G U盘兼容的多&a…
阅读更多...
Python-数据处理

Python-数据处理

第十五章 生成数据 安装Matplotlib&#xff1a;通过pip install matplotlib命令安装库。绘制折线图的核心语法为&#xff1a; import matplotlib.pyplot as plt x_values [1, 2, 3] y_values [1, 4, 9] plt.plot(x_values, y_values, linewidth2) plt.title(&quo…
阅读更多...
Java基础-23-静态变量与静态方法的使用场景

Java基础-23-静态变量与静态方法的使用场景

在Java中&#xff0c;static关键字用于定义静态变量和静态方法。它们属于类本身&#xff0c;而不是类的某个实例。因此&#xff0c;静态成员可以通过类名直接访问&#xff0c;而无需创建对象。以下是静态变量与静态方法的常见使用场景&#xff1a; 一、静态变量的使用场景 静态…
阅读更多...
大模型架构记录12【Agent实例-tool】

大模型架构记录12【Agent实例-tool】

运行根目录下几个ipynb文件- Learn-Agent.ipynb- 学习《Custom agent 自定义代理》部分- v1-Create-Custom-Agent.ipynb- v2-Create-Custom-Agent.ipynb- 基于v1&#xff0c;新增一些职位描述&#xff08;JD&#xff09;信息- v3-Create-Custom-Agent.ipynb- 基于v2&#xff0c…
阅读更多...
在MCU工程中优化CPU工作效率的几种方法

在MCU工程中优化CPU工作效率的几种方法

在嵌入式系统开发中&#xff0c;优化 CPU 工作效率对于提升系统性能、降低功耗、提高实时性至关重要。Keil 作为主流的嵌入式开发工具&#xff0c;提供了多种优化策略&#xff0c;包括 关键字使用、内存管理、字节对齐、算法优化 等。本文将从多个方面介绍如何在 Keil 工程中优…
阅读更多...
Linux系统下C语言fork函数使用案例

Linux系统下C语言fork函数使用案例

一、fork函数的作用 生成一个子进程&#xff0c;异步执行某个任务&#xff1b; 二、子进程的作用 1、子进程能复制一份父进程的变量、函数&#xff1b; 2、子进程可以和父进程同时并发执行&#xff1b; 函数语法&#xff1a; pid_t fork() 说明&#xff1a;调用后返回一个进程…
阅读更多...
MySQL中的CREATE TABLE LIKE和CREATE TABLE SELECT

MySQL中的CREATE TABLE LIKE和CREATE TABLE SELECT

MySQL中的CREATE TABLE LIKE和CREATE TABLE SELECT CREATE TABLE LIKECREATE TABLE SELECT CREATE TABLE LIKE CREATE TABLE ... LIKE可以用来复制表结构&#xff0c;源表上的索引和约束也会复制。CREATE TABLE ... LIKE不能复制表数据。CREATE TABLE ... LIKE只能复制基表&…
阅读更多...
Java开发者指南：深入理解HotStuff新型共识算法

Java开发者指南：深入理解HotStuff新型共识算法

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、全栈领域优质创作者、高级开发工程师、高级信息系统项目管理师、系统架构师&#xff0c;数学与应用数学专业&#xff0c;10年以上多种混合语言开发经验&#xff0c;从事DICOM医学影像开发领域多年&#xff0c;熟悉DICOM协议及…
阅读更多...
opencv图像处理之指纹验证

opencv图像处理之指纹验证

一、简介 在当今数字化时代&#xff0c;生物识别技术作为一种安全、便捷的身份验证方式&#xff0c;正广泛应用于各个领域。指纹识别作为生物识别技术中的佼佼者&#xff0c;因其独特性和稳定性&#xff0c;成为了众多应用场景的首选。今天&#xff0c;我们就来深入探讨如何利…
阅读更多...
wfs.js之h264转码mp4分析

wfs.js之h264转码mp4分析

准备源文件 下载源文件 git clone https://github.com/ChihChengYang/wfs.js.git编译后得到wfs.js这个文件 调用 在demo/index.html中&#xff0c;前端对wfs.js进行了调用 var video1 document.getElementById("video1"), wfs new Wfs(); wfs.attachMedia…
阅读更多...
协程 Coroutine

协程 Coroutine

协程是 C20 引入的新特性。 文章目录 基本概念std::coroutine_handlepromise 类型co_yield 基本用法 优势异步 TCPco_await 基本概念 协程&#xff08;Coroutine&#xff09;是一种比线程更加轻量级的并发编程模型。协程的调度由程序员手动控制。 异步不是并行&#xff0c;但…
阅读更多...
uniapp中的流式输出

uniapp中的流式输出

一、完整代码展示 目前大多数的ai对话都是流式输出&#xff0c;也就是对话是一个字或者多个字逐一进行显示的下面是一个完整的流式显示程序&#xff0c;包含的用户的消息发出和ai的消息回复 <template><view class"chat-container"><view class&quo…
阅读更多...
洛谷题单1-P5703 【深基2.例5】苹果采购-python-流程图重构

洛谷题单1-P5703 【深基2.例5】苹果采购-python-流程图重构

题目描述 现在需要采购一些苹果&#xff0c;每名同学都可以分到固定数量的苹果&#xff0c;并且已经知道了同学的数量&#xff0c;请问需要采购多少个苹果&#xff1f; 输入格式 输入两个不超过 1 0 9 10^9 109 正整数&#xff0c;分别表示每人分到的数量和同学的人数。 输…
阅读更多...
JS 手撕题高频考点

JS 手撕题高频考点

前端面试中&#xff0c;JS 手撕题是高频考点&#xff0c;主要考察 编程能力、算法思维、JS 核心知识。以下是最常见的手撕题分类 代码示例&#xff1a; 目录 &#x1f4cc; 1. 手写函数柯里化&#x1f4cc; 2. 手写 debounce&#xff08;防抖&#xff09;&#x1f4cc; 3. 手写…
阅读更多...
【STM32】知识点介绍一：硬件知识

【STM32】知识点介绍一：硬件知识

文章目录 一、电源引脚简介二、电平信号三、电路分析 一、电源引脚简介 VCC、GND、VDD和VSS是电子电路中常见的术语&#xff0c;代表着不同的电源引脚或电压。 VCC&#xff08;Voltage at the Common Collector&#xff09;&#xff1a;VCC是指集电极&#xff08;Collector&am…
阅读更多...
3. 列表元素替换

3. 列表元素替换

【问题描述】给定一个列表&#xff0c;将列表中所有的偶数替换为0 【输入形式】输入一行&#xff0c;包含若干个整数&#xff0c;用空格分隔 【输出形式】输出替换后的列表&#xff0c;每个元素用空格分隔 【样例输入】1 2 3 4 5 6 7 8 9 10 【样例输出】1 0 3 0 5 0 7 0 9…
阅读更多...
最新文章

Copyright @ 2022~2023