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.rhkb.cn/news/43871.html

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

相关文章

Spring Initializr搭建spring boot项目

Spring Initializr搭建spring boot项目

介绍 Spring Initializr 是一个用于快速生成 Spring Boot 项目结构的工具。它为开发者提供了一种便捷的方式&#xff0c;可以从预先定义的模板中创建一个新的 Spring Boot 应用程序&#xff0c;从而节省了从头开始设置项目的大量时间。 使用 Spring Initializr&#xff0c;你…
阅读更多...
C++中的new、malloc、realloc、calloc——特点？函数原型？释放方式？区别？校招面试常问内容？

C++中的new、malloc、realloc、calloc——特点？函数原型？释放方式？区别？校招面试常问内容？

作者&#xff1a;求一个demo 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 内容通俗易懂&#xff0c;没有废话&#xff0c;文章最后是面试常问内容&#xff08;建议通过标题目录学习&#xff09; 废话不多…
阅读更多...
【字符设备驱动开发–IMX6ULL】（一）简介

【字符设备驱动开发–IMX6ULL】（一）简介

【字符设备驱动开发–IMX6ULL】&#xff08;一&#xff09;简介 一、Linux驱动与裸机开发区别 1.裸机驱动开发回顾 ​ 1、底层&#xff0c;跟寄存器打交道&#xff0c;有些MCU提供了库。 spi.c&#xff1a;主机驱动&#xff08;换成任何一个设备之后只需要调用此文件里面的…
阅读更多...
Spring AI MCP 架构详解

Spring AI MCP 架构详解

Spring AI MCP 架构详解 1.什么是MCP? MCP 是一种开放协议&#xff0c;它对应用程序向大语言模型&#xff08;LLMs&#xff09;提供上下文信息的方式进行了标准化。可以把 MCP 想象成人工智能应用程序的 USB-C 接口。就像 USB-C 为将设备连接到各种外围设备和配件提供了一种…
阅读更多...
【Java】IO流

【Java】IO流

一、IO流的定义 二、 字节流 &#xff08;一&#xff09;FileOutputStream 操作本地文件的字节输出流&#xff0c;可以把程序中的数据写到本地文件中。 1、书写步骤 注&#xff1a; &#xff08;1&#xff09;创建字节输出流对象&#xff1a; 参数是字符串表示的路径或者…
阅读更多...
Java 大视界 -- Java 大数据机器学习模型在电商商品推荐冷启动问题中的解决策略（160）

Java 大视界 -- Java 大数据机器学习模型在电商商品推荐冷启动问题中的解决策略（160）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…
阅读更多...
MySQL———作业实验

MySQL———作业实验

一、创建数据库表 1.创建数据库 mysql> create database mydb11_stu; mysql> use mydb11_stu; 2.建表 &#xff08;1&#xff09;创建student表 mysql> create table student ( -> id int(10) not null unique primary key, -> name varch…
阅读更多...
深度解析衡石科技HENGSHI SENSE嵌入式分析能力：如何实现3天快速集成

深度解析衡石科技HENGSHI SENSE嵌入式分析能力：如何实现3天快速集成

嵌入式分析成为现代SaaS的核心竞争力 在当今SaaS市场竞争中&#xff0c;数据分析能力已成为产品差异化的关键因素。根据Bessemer Venture Partners的最新调研&#xff0c;拥有深度嵌入式分析功能的SaaS产品&#xff0c;其客户留存率比行业平均水平高出23%&#xff0c;ARR增长速…
阅读更多...
Day17 -实例：利用不同语言不同框架的特征 进行识别

Day17 -实例：利用不同语言不同框架的特征 进行识别

前置&#xff1a;我们所需的web站点&#xff0c;都可以利用fofa去搜索&#xff0c;例如&#xff1a;app"flask"这样的语句去找对应的站点&#xff0c;找到后&#xff0c;我们模拟不知道是什么框架&#xff0c;再根据特征去判断它的框架。 ***利用工具可以再去结合大…
阅读更多...
Linux输入系统应用编程

Linux输入系统应用编程

什么是输入系统 Linux 输入系统是处理用户输入设备(如键盘、鼠标、触摸屏、游戏手柄等)的软件架构。在应用编程层面&#xff0c;它提供了与这些输入设备交互的接口。 主要组成部分 输入设备驱动层&#xff1a;直接与硬件交互的驱动程序 输入核心层&#xff1a;内核中的输入子…
阅读更多...
【C++初阶】---类和对象（下）

【C++初阶】---类和对象（下）

1.再探构造函数&#xff08;初始化链表&#xff09; •之前我们实现构造函数时&#xff0c;初始化成员变量主要使⽤函数体内赋值&#xff0c;构造函数初始化还有⼀种⽅式&#xff0c;就是初始化列表&#xff0c;初始化列表的使⽤⽅式是以⼀个冒号开始&#xff0c;接着是⼀个以逗…
阅读更多...
Ubuntu 22.04.5 LTS 设置时间同步 ntp

Ubuntu 22.04.5 LTS 设置时间同步 ntp

提示&#xff1a;文章为操作记录&#xff0c;以备下次使用 文章目录 前言一、设置ntp1.1替换国内源1.2 更新源&安装1.3 验证 前言 设置时间同步&#xff0c;环境版本 # cat /etc/os-release PRETTY_NAME"Ubuntu 22.04.5 LTS" NAME"Ubuntu" VERSION_…
阅读更多...
飞书电子表格自建应用

飞书电子表格自建应用

背景 coze官方的插件不支持更多的飞书电子表格操作&#xff0c;因为需要自建应用 飞书创建文件夹 创建应用 开发者后台 - 飞书开放平台 添加机器人 添加权限 创建群 添加刚刚创建的机器人到群里 文件夹邀请群 创建好后&#xff0c;就可以拿到id和key 参考教程&#xff1a; 创…
阅读更多...
计算机网络——传输层(TCP)

计算机网络——传输层(TCP)

传输层 在计算机网络中&#xff0c;传输层是将数据向上向下传输的一个重要的层面&#xff0c;其中传输层中有两个协议&#xff0c;TCP&#xff0c;UDP 这两个协议。 TCP 话不多说&#xff0c;我们直接来看协议报头。 源/目的端口号&#xff1a;表示数据从哪个进程来&#xff0…
阅读更多...
【ArcGIS】ArcGIS10.6彻底卸载和ArcGIS10.2安装全过程

【ArcGIS】ArcGIS10.6彻底卸载和ArcGIS10.2安装全过程

卸载python3后,解决了ArcGIS与python3冲突问题后,软件可以正常打开使用了 但是还是出现了问题 用ArcGIS 进行空间分析时,中间操作没有任何报错和问题,但是就是没有运行结果 在别人的软件上操作一遍可以出现运行结果 关闭确有这个,但真的不是我给它的运行时间不够,反反复复试…
阅读更多...
智慧电力：点亮未来能源世界的钥匙

智慧电力：点亮未来能源世界的钥匙

在科技日新月异的今天&#xff0c;电力行业正经历着前所未有的变革。智慧电力&#xff0c;作为这一变革的核心驱动力&#xff0c;正逐步改变着我们对电力的认知和使用方式。它不仅是电力行业的一次技术革新&#xff0c;更是推动社会可持续发展、实现能源高效利用的重要途径。 智…
阅读更多...
oracle中java类的使用

oracle中java类的使用

方式一&#xff1a; 编写一个简单的java类 vi OracleJavaDemo.java public class OracleJavaDemo { public static String processData(String input) { return "Processed: " input; } } 编译 javac OracleJavaDemo.java 生成OracleJavaDemo…
阅读更多...
pycharm2024.1.1版本_jihuo

pycharm2024.1.1版本_jihuo

目录 前置&#xff1a; 步骤&#xff1a; step one 下载软件 step two 卸载旧版本 1 卸载软件 2 清除残余 step three 下载补丁 step four 安装2024.1.1版本软件 step five 安装补丁 1 找位置放补丁 2 自动设置环境变量 step six 输入jihuo码 前置&#xff1a; 之…
阅读更多...
革新汽车安全通信技术，美格智能全系车载通信模组支持NG-eCall

革新汽车安全通信技术，美格智能全系车载通信模组支持NG-eCall

根据QYR&#xff08;恒州博智&#xff09;的统计及预测&#xff0c;2024年全球汽车无线紧急呼叫&#xff08;eCall&#xff09;设备市场销售额达到了25.17亿美元&#xff0c;预计2031年将达到44.97亿美元&#xff0c;年复合增长率&#xff08;CAGR 2025-2031&#xff09;为8.8%…
阅读更多...
AWE 2025：当AI科技遇见智能家居

AWE 2025：当AI科技遇见智能家居

3月20日&#xff0c;以“AI科技、AI生活”为主题的AWE2025&#xff08;中国家电及消费电子博览会&#xff09;在上海新国际博览中心开幕。作为全球家电行业风向标&#xff0c;本届展会最大的亮点莫过于健康理念在家电领域的全面渗透。从食材保鲜到空气净化&#xff0c;从衣物清…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023