CSS高级选择器

一、属性选择器

以value开头的att属性的E元素:E[att^="value"]{ ;}

a[href^=http]{background-color="red";}

css

a[href^=http]{background-color="red";
}

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>a[href^=http]{background-color: red;}</style>
</head>
<body><p class="demo"><a href="http://www.baidu.com" class="links item first" >1</a><!-- 1背景变红 --><a href class="active item" title="test website" target=" blank">2</a><a href="sites/file/test.html" class="links item">3</a><a href="sites/file/test.png" class="links item"> 4</a><a href="sites/file/image,ipg" class="links item">5</a></p>
</body>
</html>

结果,1背景变红

 

以value结尾的att属性的E元素:E[att$="value"]{ ;}  

 a[href$=png]{background-color: red;}

css

        a[href$=png]{background-color: red;}

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>a[href$=png]{background-color: red;}</style>
</head>
<body><p class="demo"><a href="http://www.baidu.com" class="links item first" >1</a><a href class="active item" title="test website" target=" blank">2</a><a href="sites/file/test.html" class="links item">3</a><a href="sites/file/test.png" class="links item"> 4</a><!-- 4背景变红 --><a href="sites/file/image,ipg" class="links item">5</a></p>
</body>
</html>

 结果,4背景变红

含有value的att属性的E元素:E[att*="value"] { ;}  

a[class*=links] { background: red; }

css

        a[class*=links]{background-color: red;}

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>a[class*=links]{background-color: red;}</style>
</head>
<body><p class="demo"><a href="http://www.baidu.com" class="links item first" >1</a><a href class="active item" title="test website" target=" blank">2</a><!-- 除了2背景都变红 --><a href="sites/file/test.html" class="links item">3</a><a href="sites/file/test.png" class="links item"> 4</a>  <a href="sites/file/image,ipg" class="links item">5</a></p>
</body>
</html>

 除了2背景都变红

二、关系选择器

子代选择器:E元素的直接下一级的所有子元素F,对下下级无效:E>F{ ;}

 body>p{  background: pink;  }

相邻兄弟选择器:E元素的下一个平级F元素,紧贴着E:E+F{ ;}

.active+p {  background: green;  }

普通兄弟选择器:E元素之后的所有平级元素F:E~F{ ;}

.active~p{  background: yellow;  }

三:结构伪类选择器

四:链接伪类选择器

五:伪元素选择器

在被选元素E的内容的前面插入内容,必须配合content属性:E::before{content:插入的内容;...;...;}

在被选元素E的内容的后面插入内容,必须配合content属性:E::after{content:插入的内容;...;...;}

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

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

相关文章

《QT实用小工具·四十四》支持图片和动图的文本编辑器

1、概述 源码放在文章末尾 该项目实现了一个功能丰富的文本编辑器&#xff0c;除了包含文本常规的编辑功能&#xff0c;还包括图片的插入功能和动图的插入功能&#xff0c;项目demo演示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #include "imagehelper.…

echarts实现水滴图

使用echarts实现水滴图 引入依赖&#xff0c;echarts-liquidfill3兼容echarts5; 安装依赖 "echarts": "^5.4.3","echarts-liquidfill": "^3.1.0",npm install echarts-liquidfill3.1.0 -S实现的效果图 构建一个水滴图的页面 <tem…

Scanpy(1)数据结构和样本过滤

注&#xff1a;主要讲述scanpy处理数据的结构、数据过滤&#xff08;生信领域&#xff09;和数据预处理&#xff08;和机器学习类似&#xff0c;但是又有不同。&#xff09; 1. Scanpy简介与安装 Scanpy 是一个可扩展的工具包&#xff0c;用于分析与 AnnData&#xff08;一种…

SpringCloud系列(19)--将服务消费者Consumer注册进Consul

前言&#xff1a;在上一章节中我们把服务提供者Provider注册进了Consul&#xff0c;而本章节则是关于如何将服务消费者Consumer注册进Consul 1、再次创建一个服务提供者模块&#xff0c;命名为consumerconsul-order80 (1)在父工程下新建模块 (2)选择模块的项目类型为Maven并选…

2024LarkXR新增功能系列之九| 优化分配策略:增加GPU检查参数

Paraverse平行云实时云渲染解决方案LarkXR在2024年新增了优化分配策略&#xff0c;增强了GPU检查参数的能力&#xff0c;满足了复杂元宇宙/数字孪生场景多样性的可视化的需求&#xff0c;为这些应用找到了更好的解决方案。新版本的LarkXR在渲染请求分配策略上做出了显著的改进。…

币圈资讯Cryptosquare论坛

在加密货币世界中&#xff0c;信息的及时获取对于投资者和交易者至关重要。今天&#xff0c;我将向大家介绍Cryptosquare这个综合性资讯论坛&#xff0c;它汇集了币圈新闻、空投信息、社会热点以及与Web3相关的工作信息。让我们一起解锁加密世界的种种可能性&#xff0c;探索Cr…

创建SpringBoot和RabbitMQ的整合项目

文章目录 创建SpringBoot和RabbitMQ的整合项目首先快速创建一个maven项目引入SpringBoot整合rabbitMQ的依赖在src/main目录下创建resources目录并引入配置文件写消息发送者MessageSender写消息接收者MessageReceiver写RabbitMQConfig配置类写SpringBoot启动主类CommandLineRunn…

【黑马点评Redis——002商户查询缓存】

1. 商户查询缓存 2. 知识储备和课程内容 2.1 什么是缓存 缓存是数据交换的缓冲区&#xff0c;是存贮数据的临时地方&#xff0c;一般读写性能较高。 浏览器缓存应用层缓存数据库缓存CPU缓存磁盘缓存 缓存的作用&#xff1a; 降低后端负载提高读写效率&#xff0c;降低响应…

B站无限评论暴力截留协议及教程

B站无限评论暴力截留协议及教程 B站无限评论暴力截留协议及教程&#xff0c;需要抓CK &#xff0c;教程里面有讲如何抓取 网盘自动获取 链接&#xff1a;https://pan.baidu.com/s/1lpzKPim76qettahxvxtjaQ?pwd0b8x 提取码&#xff1a;0b8x

springboot路劲映射

般情况下&#xff0c;使用了页面模板后&#xff0c;用户需要通过控制器才能访问页面。有一些页面需要在控制器中加载数据&#xff0c;然后渲染&#xff0c;才能显示出来;还有一些页面在控制器中不需要加载数据&#xff0c;只是完成简单的跳转&#xff0c;对于这种页面&#xff…

C++:week1:C语言基础

文章目录 (一) C语言概述1.预处理指令&#xff1a;宏定义、宏函数2.生成可执行程序的过程3.进程与虚拟内存空间 (二) 格式化输入输出1.变量及命名2.格式化输入输出、输入输出模型(1)CPU、内存、外部设备的速度矛盾(2)printf(3)scanf 3.代码即注释4.程序出错的原因、调试程序5.其…

提示词优化的自动化探索:Automated Prompt Engineering

编者按&#xff1a; 作者在尝试教授母亲使用 LLM 完成工作任务时&#xff0c;意识到提示词的优化并不像想象中简单。提示词的自动优化对于经验并不丰富的提示词撰写者很有价值&#xff0c;他们没有足够的经验去调整和改进提供给模型的提示词&#xff0c;这引发了对自动化提示词…

C++学习之指针和引用

指针 指针是一个变量&#xff0c;其值为另一个变量的地址&#xff0c;即&#xff0c;内存位置的直接地址。就像其他变量或常量一样&#xff0c;您必须在使用指针存储其他变量地址之前&#xff0c;对其进行声明。指针变量声明的一般形式为&#xff1a; type *var-name; 在这里…

kotlin 编写一个简单的天气预报app (七)使用material design

一、优化思路 对之前的天气预报的app进行了优化&#xff0c;原先的天气预报程序逻辑是这样的。 使用text和button组合了一个输入城市&#xff0c;并请求openweathermap对应数据&#xff0c;并显示的功能。 但是搜索城市的时候&#xff0c;可能会有错误&#xff0c;比如大小写…

steam打不开没反应 steam客户端启动不了一直无响应的解决方法

steam打不开没反应 steam客户端启动不了一直无响应的解决方法 steam这个平台想必各位游戏爱好者们肯定不会陌生&#xff0c;作为全球最大的游戏服务平台&#xff0c;steam不仅为玩家们提供了全面的游戏服务&#xff0c;还经常给玩家们提供各种游戏优惠&#xff0c;并且每年四…

【综述】DSP处理器芯片

文章目录 TI DSP C2000系列 TMS320F28003X 典型应用 开发工具链 参考资料 TI DSP TI C2000系列 控制领域 TI C5000系列 通信领域 TI C6000系列 图像领域 C2000系列 第三代集成了C28浮点DSP内核&#xff0c;采用了65nm工艺&#xff08;上一代180nm&#xff09; 第四代正在…

无人零售与传统便利店的竞争优势

无人零售与传统便利店的竞争优势 成本控制 • 无人零售 显著降低了人力成本&#xff0c;无需支付店员薪资和相关福利&#xff0c;且通过智能化管理减少能源消耗与维护费用&#xff0c;尤其在高租金和高人流区域效益突出。 • 传统便利店 则承担较高的人员开支&#xff0c;…

chrome 查看版本安装路径、cmd命令行启动浏览器

chrome 查看版本安装路径 浏览器输入 chrome://version/cmd命令行启动浏览器 "C:\Program Files\Google\Chrome\Application\chrome.exe" www.baidu.com

恒峰智慧科技—高扬程水泵:解决远距离输水难题的新选择!

在森林消防领域&#xff0c;水泵是一个至关重要的设备。它的主要功能是将水源输送到火灾现场&#xff0c;为消防人员提供足够的水源进行灭火。然而&#xff0c;传统的水泵往往面临着距离限制的问题&#xff0c;这对于远距离输水来说是一个巨大的挑战。幸运的是&#xff0c;高扬…

Jenkins构建触发器-Git hook自动触发构建

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 Jenkins是一个开源…