html之CSS的高级选择器应用

文章目录

  • 一、CSS高级选择器有哪些呢?
  • 二、高级选择器的应用
    • 1、层次选择器
      • 后代选择器
      • 子选择器
      • 相邻兄弟选择器
      • 通用兄弟选择器
    • 2、结构伪类选择器(不常用)
    • 3、属性选择器
      • E[attr]
      • E[attr=val]
      • E[attr^=val]
      • E[attr$=val]
      • E[attr*=val]


一、CSS高级选择器有哪些呢?

1、层次选择器
2、结构伪类选择器
3、属性选择器

二、高级选择器的应用

1、层次选择器

选择器类型功能描述
E F后代选择器选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
E>F子选择器选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素
E+F相邻兄弟选择器选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面
E~F通用兄弟选择器选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

后代选择器

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>body p{width: 200px;height: 200px;background-color: red;}
</style>
<body>
<p></p>
</body>
</html>

运行结果:
在这里插入图片描述

子选择器

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>body>p{background-color: red;}p{width: 200px;height: 200px;background-color: black;}
</style>
<body>
<p></p>
<p></p>
<p></p>
</body>
</html>

运行结果:
在这里插入图片描述

相邻兄弟选择器

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.aa+p{background-color: red;}p{width: 200px;height: 200px;background-color: black;}
</style>
<body>
<p class="aa"></p>
<p></p>
<p></p>
</body>
</html>

运行结果:
在这里插入图片描述

通用兄弟选择器

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.aa~p{background-color: red;}p{width: 200px;height: 200px;background-color: black;}
</style>
<body>
<p class="aa"></p>
<p></p>
<p></p>
</body>
</html>

运行结果:
在这里插入图片描述

2、结构伪类选择器(不常用)

属性选择器功能描述
E:first-child作为父元素的第一个子元素的元素E
E:last-child作为父元素的最后一个子元素的元素E
E F:nth-child(n)选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even、odd
E:first-of-type选择父元素内具有指定类型的第一个E元素
E:last-of-type选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)选择父元素内具有指定类型的第n个F元素

3、属性选择器

属性选择器功能描述
E[attr]选择匹配具有属性attr的E元素
E[attr=val]选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
E[attr^=val]选选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
E[attr$=val]选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
E[attr*=val]选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配

E[attr]

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class]{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果:
在这里插入图片描述

E[attr=val]

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class='aaaa']{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果:
在这里插入图片描述

E[attr^=val]

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class^='qw']{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果:
在这里插入图片描述

E[attr$=val]

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class$='kl']{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果:
在这里插入图片描述

E[attr*=val]

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>p[class*='e']{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
</style>
<body>
<p class="aaaa"></p>
<p class="qwert"></p>
<p class="hjekl"></p>
</body>
</html>

运行结果:
在这里插入图片描述

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

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

相关文章

Golang中方法定义及使用

一、介绍 方法是与特定类型关联的函数。它允许在类型上执行操作&#xff0c;并可以访问和修改该类型的字段。方法的定义包括接收者类型、方法名和参数列表。接收者类型可以是结构体、接口或其他自定义类型。 方法的接收者可以是值或指针类型。如果接收者是值类型&#xff0c;…

excel该如何实现生成条形码/二维码?

如何在Excel中制作条形码/二维码&#xff1f; 1.首先&#xff0c;打开电脑上的Excel。进入后&#xff0c;在上方菜单栏中找到并点击“开发工具”。如果没有找到开发工具&#xff0c;就先点击“文件”&#xff0c;在弹出菜单中再点击“选项”。 2.打开Excel选项窗口后&#xff0…

【Flink-cdc-Mysql-To-Kafka】使用 Flinksql 利用集成的 connector 实现 Mysql 数据写入 Kafka

【Flink-cdc-Mysql-To-Kafka】使用 Flinksql 利用集成的 connector 实现 Mysql 数据写入 Kafka 1&#xff09;环境准备2&#xff09;准备相关 jar 包3&#xff09;实现场景4&#xff09;准备工作4.1.Mysql4.2.Kafka 5&#xff09;Flink-Sql6&#xff09;验证 1&#xff09;环境…

java:Lambda函数式编程

作为一个前端同学&#xff0c;今天惊叹的发现&#xff0c;原来 java 也可以使用函数式编程&#xff0c;赶紧来看看怎么玩 简介 当Java 8引入Lambda表达式和函数式编程特性时&#xff0c;它开启了一个全新的编程范式。这些功能使得Java语言更加现代、灵活&#xff0c;并支持更…

VuePress安装及使用——使用 Markdown 创建你自己的博客网站和电子书

目录 前言一、依赖环境二、vuepress 安装和使用1.初始化2.将 VuePress 安装为本地依赖3. package.json 中添加脚本4. 新建 docs 文件夹5.启动6. 效果 三、进阶使用1.新增配置文件2.安装搜索插件3.config.js 中增加配置4.效果展示5.注意 四、使用主题1.安装2. 目录结构说明&…

MeterSphere 和 Yapi 接口测试功能对比

一、产品介绍 MeterSphere 是一站式开源持续测试平台&#xff0c;涵盖测试跟踪、接口测试、UI 测试和性能测试等&#xff0c;全面兼容 JMeter、Selenium 等主流开源标准&#xff0c;有效助力开发和测试团队在线共享协作&#xff0c;实现端到端的测试管理跟踪可视化、自动化测试…

Hadoop3.x完全分布式模式下slaveDataNode节点未启动调整

目录 前言 一、问题重现 1、查询Hadoop版本 2、集群启动Hadoop 二、问题分析 三、Hadoop3.x的集群配置 1、停止Hadoop服务 2、配置workers 3、从节点检测 4、WebUI监控 总结 前言 在大数据的世界里&#xff0c;Hadoop绝对是一个值得学习的框架。关于Hadoop的知识&…

git修改远程commit信息

git 修改远程commit信息 如果你已经把本地commit的信息push到远程了&#xff0c;此时需要修改远程中的commit信息 第一步&#xff1a;git log 查看提交的信息,看下提交的commit日志 如下入所示 第二步&#xff1a;然后确定你需要修改的那一次commit&#xff0c;比如&#xf…

运营Instagram的实用必备工具分享!

Instagram作为目前全球最受欢迎的社交媒体平台之一&#xff0c;已经成为品牌推广和营销的重要渠道。然而&#xff0c;要在Instagram上成功运营并吸引更多的关注者和用户参与&#xff0c;需要借助一些实用的工具来提升效率和效果。在本篇博客文章中&#xff0c;我们将分享10个运…

简单的绑定发布事件

在绑定事情之前&#xff0c;我们需要对我们的需求进行分析&#xff1b;判断我们是否需要同时存在条件。 发布动态的时候&#xff0c;分为以下三种情况&#xff1a; ① 输入了标题&#xff0c;没有图片&#xff0c;可以发布动态 ②输入了图片&#xff0c;没有标题&#xff0c;…

清空缓存区的方法

fflush(文件指针) fflush()用于刷新相应文件的缓存区。 使用getchar()函数来清空标准输入缓存区 上面的fflush是一个函数,有些编译器不一定支持,这时候我们可以自己实现清空标准输入缓存区的操作。 代码示例: 使用scanf()的高级特性来清空标准输入缓存区 上面代码的意思是: …

GO 的 socks5代理 编写

这里学习一下 socks5 代理的编写 网上有很多 学习一下 go 语言实战入门案例之实现Socks5 - 知乎 滑动验证页面 socks5协议原理学习-腾讯云开发者社区-腾讯云 (tencent.com) 首先我们要了解一下socks5的代理方式 socks5 是基于 认证建立连接转发数据 所形成的代理 我们只…

Wireshark统计和可视化

第一章&#xff1a;Wireshark基础及捕获技巧 1.1 Wireshark基础知识回顾 1.2 高级捕获技巧&#xff1a;过滤器和捕获选项 1.3 Wireshark与其他抓包工具的比较 第二章&#xff1a;网络协议分析 2.1 网络协议分析&#xff1a;TCP、UDP、ICMP等 2.2 高级协议分析&#xff1a;HTTP…

LLMs推理框架总结

总结一下这些框架的特点&#xff0c;如下表所示&#xff1a; LLM推理有很多框架&#xff0c;各有其特点&#xff0c;下面分别介绍一下表中七个框架的关键点&#xff1a; vLLM&#xff1a;适用于大批量Prompt输入&#xff0c;并对推理速度要求高的场景&#xff1b;Text generat…

P1011 [NOIP1998 提高组] 车站 ---Java

主打一个枚举找规律... 站台123456...上车ababa2b2a3b3a5b下车bbaba2b2a3b人数aa2a2ab3a2b4a4b 上车这一行: 观察a的系数&#xff08;假设是dx[i]&#xff09;可知: dx[i] dx[i-1] dx[i-2] b的系数&#xff08;假设是dy[i]&#xff09;可知: dy[i] dy[i-1] dy[i-2] 人数…

黑豹程序员-vue3获取拖动div后的坐标

<script lang"ts" setup> import {ref, reactive, onMounted} from vuelet startclientX ref(0) // 元素拖拽前距离浏览器的X轴位置 let startclientY ref(0) //元素拖拽前距离浏览器的Y轴位置 let elLeft ref(770) // 元素的左偏移量 let elTop ref(220) …

android的bundle的常用函数(ChatGPT)

在 Android 中&#xff0c;Bundle 是一个用于保存和传递数据的容器类&#xff0c;它被广泛用于在不同组件&#xff08;如 Activity、Fragment&#xff09;之间传递数据。以下是一些 Bundle 中常用的函数&#xff1a; putXXX 系列方法&#xff1a; 用于将各种类型的数据放入 Bun…

C语言-> 文件操作(函数满屏)

系列文章目录 前言 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青_C语言,数据结构,函数-CSDN博客 目的&#xff1a;学习文件操作&#xff0c;即…

林杰:程序员依然是草根跨越阶级的最佳途径之一 | 程客有话说

《程客有话说》是我们最新推出的一个访谈栏目&#xff0c;邀请一些国内外有趣的程序员来分享他们的经验、观点与成长故事&#xff0c;尝试建立一个程序员交流与学习的平台&#xff0c;也欢迎大家推荐朋友或自己来参加我们的节目&#xff0c;一起加油。 本期我们邀请的程序员林…

2023-12-19 二叉搜索树的最小绝对差和二叉搜索树的众数和二叉树的最近公共祖先

二叉搜索树的最小绝对差 关键信息&#xff1a;二叉搜索树表明了树有序的&#xff01;遇到在二叉搜索树上求什么最值啊&#xff0c;差值之类的&#xff0c;就把它想成在一个有序数组上求最值&#xff0c;求差值 # Definition for a binary tree node. # class TreeNode: # …