结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{background: #0af6f6;
}/*ul的最后一个子元素*/
ul li:last-child{background: #d27bf3;
}
/*选中p1:定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效
*/
p:nth-child(2){background: red;
}
/*选中父元素,下的p元素的第二个,类型*/
p:nth-of-type(2){background: gold;
}
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li><li><p>p4</p></li>
</ul>

在这里插入图片描述

属性选择器(常用)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p class="demo"><a href="http://www.baidu.com" class="links item first" id="a">1</a><a href="images/123.jpg" class="links item first" id="b">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a>
</p>
</body>
</html>
=绝对等于
*=包含等于
^=以这个开头
$=以这个结尾
.demo a{float:left;display: block;height: 50px;width:50px;border-radius:10px;background: #0af6f6;text-align:center;color: #c4f8d9;text-decoration:none;margin-right:5px;font:bold 20px/50px Arial;
}

在这里插入图片描述

a[id=a]{background: red;
}

在这里插入图片描述

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

在这里插入图片描述

a[href^=http]{background: yellow;
}

在这里插入图片描述

a[href$=jpg]{background: yellow;
}

在这里插入图片描述

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

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

相关文章

使用策略模式 + 自动注册机制来构建旅游点评系统的搜索模块

✅ 目标&#xff1a; 搜索模块支持不同内容类型&#xff08;攻略、达人、游记等&#xff09;每种搜索逻辑用一个策略类表示自动注册&#xff08;基于注解 Spring 容器&#xff09;新增搜索类型时&#xff0c;只需添加一个类 一个注解&#xff0c;无需改工厂、注册表等&#x…

第八十九篇 大数据开发中的数据算法:贪心策略 - 生活中的“精打细算”艺术

在资源有限的世界里&#xff0c;贪心算法教会我们&#xff1a;局部最优的累积&#xff0c;往往是通往全局最高效的捷径。本文通过3个生活化场景原创图表&#xff0c;揭示大数据开发中最实用的优化策略。目录一、贪心算法核心思想&#xff1a;当下即最优二、三大核心应用场景详解…

【论文阅读】Dynamic Few-Shot Visual Learning without Forgetting

系统概述如下: (a) 一个基于卷积神经网络(ConvNet)的识别模型,该模型包含特征提取器和分类器; (b) 一个少样本分类权重生成器。这两个组件都是在一组基础类别上训练的,我们为这些类别准备了大量训练数据。在测试阶段,权重生成器会接收少量新类别的训练数据以及基础类别的…

HTML应用指南:利用GET请求获取全国山姆门店位置信息

山姆会员店作为全球知名的零售品牌&#xff0c;自进入中国市场以来&#xff0c;始终致力于为消费者提供高品质商品与便捷的购物体验。随着新零售业态的快速发展&#xff0c;门店位置信息的获取变得愈发重要。品牌通过不断拓展门店网络&#xff0c;目前已覆盖多个一、二线城市&a…

java ThreadLocal源码分析

写个demo测试下&#xff1a;private static void testThreadLocal() {ThreadLocal<Integer> threadLocal new ThreadLocal<>();new Thread(){Overridepublic void run() {threadLocal.set(9527);System.out.println("curr thread: " Thread.currentThr…

后端Web实战(项目管理)

Restful风格 我们的案例是基于当前最为主流的前后端分离模式进行开发 在前后端分离的开发模式中&#xff0c;前后端开发人员都需要根据提前定义好的接口文档&#xff0c;来进行前后端功能的开发。 后端开发人员&#xff1a;必须严格遵守提供的接口文档进行后端功能开发&#…

Leetcode 3604. Minimum Time to Reach Destination in Directed Graph

Leetcode 3604. Minimum Time to Reach Destination in Directed Graph 1. 解题思路2. 代码实现 题目链接&#xff1a;3604. Minimum Time to Reach Destination in Directed Graph 1. 解题思路 这一题思路上就是一个广度优先遍历&#xff0c;我们不断考察当前时间点以及位置…

OpenXR Runtime切换工具-OpenXR-Runtime-Switcher

在开发VR时&#xff0c;有时有多个设备&#xff0c;大家可能也会选择不同的串流工具&#xff0c;OpenXR类似于默认浏览器&#xff0c;如果设置错误可能导致游戏无法串流。 推荐一个工具&#xff0c;可以设置默认的OpenXR工具。 OpenXR-Runtime-Switcher 对于没有的设备&#…

Opencv探索之旅:从像素变化到世界轮廓的奥秘

在你已经能熟练地为图像施展“降噪”、“缩放”等魔法之后&#xff0c;你的探索之旅来到了一个全新的领域。你可能会好奇&#xff1a;我们人类能轻易地识别出照片中杯子的边缘、建筑的轮廓&#xff0c;那计算机是如何“看见”这些边界的呢&#xff1f;仅仅依靠滤波和颜色变换&a…

Ubuntu 22.04 + MySQL 8 无密码登录问题与 root 密码重置指南

背景场景 在 Ubuntu 系统中使用 apt 或 deb 包方式安装 MySQL 8 时&#xff1a; 初次安装后会自动初始化数据库&#xff1b;但 没有提示 root 初始密码&#xff1b;导致 mysql -u root -p 无法登录。 为了解决该问题&#xff0c;通常我们使用 --skip-grant-tables 方式跳过权限…

题解:P13017 [GESP202506 七级] 线图

首先明白定义&#xff1a; 线图 L(G)L(G)L(G) 的顶点对应原图 GGG 的边&#xff0c;当且仅当原图中的两条边有公共顶点时&#xff0c;对应的线图顶点之间有一条边。 不难想到&#xff0c;对于原图中的每个顶点 vvv&#xff0c;其度数 d(v)d(v)d(v) 对应的边集可以形成 (d(v)2)\…

c++ duiLib环境集成2

继续上一篇&#xff0c;现在需要把控制台隐藏&#xff0c;只显示调用duiLib框架显示的窗口。右键项目 → 属性 → 链接器 → 系统 → ‌子系统‌改为 窗口(/SUBSYSTEM:WINDOWS)。原来是这样&#xff1a;修改为&#xff1a;运行报错&#xff1a;需要修改入口函数为WinMain。如下…

常见的网络攻击方式及防御措施

常见的网络攻击方式及防御措施&#xff1a;全面解析网络安全威胁 前言肝文不易&#xff0c;点个免费的赞和关注&#xff0c;有错误的地方请指出&#xff0c;看个人主页有惊喜。 作者&#xff1a;神的孩子都在歌唱在信息化高速发展的今天&#xff0c;网络安全威胁无处不在&#…

JavaScript 中导入模块时,确实不需要显式地写 node_modules 路径。

1. 正确的导入语法在 Webpack、Vite 等打包工具中&#xff0c;node_modules 目录是默认的模块搜索路径&#xff0c;因此直接写包名即可&#xff1a;// ✅ 正确&#xff1a;直接使用包名import nprogress/nprogress.css;// ❌ 错误&#xff1a;不需要显式写 node_modules 路径im…

ELK Stack技术栈

文章目录一、日志收集所解决的问题二、Elastic Stack 组件介绍2.1 Elasticsearch2.2 Logstash2.3 Kibana2.4 Filebeat beats三、ELK Stack集群安装3.1 安装JAVA环境&#xff08;所有ES节点&#xff09;3.2 安装ES集群3.2.1 ES单节点部署3.2.2 ES JAVA调优&#xff1a;堆(heap)内…

大腾智能国产 3D CAD:设计自由度拉满,数据安全锁死

在智能制造与数字化转型的浪潮中&#xff0c;大腾智能CAD作为一款自主研发的三维计算机辅助设计软件&#xff0c;凭借其从概念设计到制造落地的全流程覆盖能力&#xff0c;正成为国产工业设计软件领域的新锐力量。软件深度融合先进建模技术与工程实践需求&#xff0c;为机械制造…

ubuntu 操作记录

1&#xff1a;安装minicom 1: sudo apt-get install minicom minicom -s 2&#xff1a;Ctrl Z C 的区别 ctrlz的是将任务中断,但是此任务并没有结束,他仍然在进程中他只是维持挂起的状态,用户可以使用fg/bg操作继续前台或后台的任务,fg命令重新启动前台被中断的任务,bg命令…

深度剖析:向70岁老系统植入通信芯片——MCP注入构建未来级分布式通信

> 如何让老旧系统重获新生?协议注入技术是关键。 ## 一、当遗留系统遇上分布式未来:一场艰难的对话 想象一下:你负责维护一套诞生于20年前的单体式银行核心系统,它像一位固执的70岁老人,使用着陈旧的TCP自定义协议。这时业务部门要求实现与云原生风险分析引擎的实时…

针对 SSD 固态硬盘的安全擦除 Secure Erase

SSD 的安全擦除&#xff08;Secure Erase&#xff09;用于永久删除存储介质上的数据&#xff0c;以及在驱动器性能开始明显下降至低于标称值时恢复其速度。Secure Erase 可以解决的问题核心当 SSD 开始运行缓慢&#xff08;读写数据变差&#xff09;时&#xff0c;这里有许多可…

Three.js搭建小米SU7三维汽车实战(3)轨道控制器

往期内容&#xff1a; Three.js搭建小米SU7三维汽车实战&#xff08;1&#xff09;搭建开发环境 Three.js搭建小米SU7三维汽车实战&#xff08;2&#xff09;场景搭建 轨道控制器 轨道控制器可以改变相机在空间坐标系中的位置 进而方便从不同的角度观察物体 1. 轨道控制器响…