当前位置： 首页 > news >正文

结构伪类选择器

news 2026/4/2 7:38:52

伪类选择器：用来描述一个元素的特殊状态！比如第一个元素、某个元素的子元素、鼠标点击的元素

1  first-child/last-child

/*ul的第一个子元素*/
ul li:first-child{
background: #0f35ad;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #0f35ad;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*ul的第一个子元素*/ul li:first-child{background: #0f35ad;}/*ul的最后一个子元素*/ul li:last-child{background: #0f35ad;}</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p1</p>
<ul><li>l1</li><li>l2</li><li>l3</li>
</ul>
</body>
</html>

浏览器翻译如下：

 

2  nth-child()

/*定位到父元素，选择当前的第一个元素，选择当前p元素的父级元素，选中父元素的第一个，并且是当前元素才有效*/
p:nth-child(1){
background: #0f35ad;
}

 

注意：如果第一个不是当前元素无效 

浏览器翻译如下： 

 3 nth-of-type()

 浏览器翻译如下：

 

相关文章：

结构伪类选择器

伪类选择器&#xff1a;用来描述一个元素的特殊状态&#xff01;比如第一个元素、某个元素的子元素、鼠标点击的元素 1 first-child/last-child /*ul的第一个子元素*/ ul li:first-child{ background: #0f35ad; } /*ul的最后一个子元素*/ ul li:last-child{ background: #0f3…...

编程日记 2023/10/27 17:41:56

java-- 静态数组

1.静态初始化数组 定义数组的时候直接给数组赋值。 2.静态初始化数组的格式&#xff1a; 注意&#xff1a; 1."数据类型[] 数组名"也可以写成"数据类型 数组名[]"。 2.什么类型的数组只能存放什么类型的数据 3.数组在计算机中的基本原理 当计算机遇到…...

编程日记 2023/10/27 17:40:55

世界经济论坛：ChatGPT等生成式AI，对全球23%岗位产生巨大影响

世界经济论坛与全球最大上市咨询公司之一埃森哲合作&#xff0c;联合发布了《未来工作&#xff1a;大语言模型与就业》白皮书。 世界经济论坛表示&#xff0c;随着ChatGPT、Midjourney、Github Copilot等生成式AI的飞速发展&#xff0c;对全球经济和劳动市场产生巨大影响。未来…...

编程日记 2023/10/27 17:39:54

myTracks for Mac：GPS轨迹记录器的强大与便捷

你是否曾经在户外活动或旅行中&#xff0c;希望能够记录下你的移动轨迹&#xff1f;或者在工作中&#xff0c;需要跟踪你的行程路线&#xff1f;myTracks for Mac 是一款强大的 GPS 轨迹记录器&#xff0c;它可以帮助你实现这些愿望。 myTracks 是一款专门为 Mac 设计的 GPS 轨…...

编程日记 2023/10/27 17:37:52

Macos视频增强修复工具：Topaz Video AI for mac

Topaz Video AI是一款使用人工智能技术对视频进行增强和修复的软件。它可以自动降噪、去除锐化、减少压缩失真、提高清晰度等等。Topaz Video AI可以处理各种类型的视频&#xff0c;包括低分辨率视频、老旧影片、手机录制的视频等等。 使用Topaz Video AI非常简单&#xff0c;…...

编程日记 2023/10/27 17:36:50

如何在IDEA中配置指定JDK版本？轻松解决！！！

有时候我们在导入项目&#xff0c;如果手动在IDEA中指定jdk版本&#xff0c;往往启动项目会报错误。 因此当我们新引入项目启动不了时可以检查一下自己IDEA中的jdk版本是否正确。 下面以配置jdk版本为11显示步骤&#xff1a; 1、配置 Project Structure 1.1、通过快捷键&qu…...

编程日记 2023/10/27 17:35:50

思维导图软件 ConceptDraw MINDMAP mac中文特色介绍

ConceptDraw MINDMAP mac是一款思维导图绘制软件&#xff0c;它可以帮助用户快速创建各种类型的思维导图&#xff0c;如组织结构图、流程图、概念图和UML图等。该软件具有直观的界面和简单易用的操作方式&#xff0c;使得用户能够轻松地创建复杂的思维导图。此外&#xff0c;它…...

编程日记 2023/10/27 17:34:49

PDF编辑工具Acrobat Pro DC 2023中文

Acrobat Pro DC 2023是一款全面、高效的PDF编辑和管理软件。它提供了丰富的PDF编辑功能&#xff0c;如创建、编辑、合并、分割、压缩、旋转、裁剪等&#xff0c;让用户可以轻松处理各种PDF文档。同时&#xff0c;该软件还具有智能的PDF处理技术&#xff0c;可以自动识别和修复P…...

编程日记 2023/10/27 17:33:47

如何开通 Medium会员

1 开通 WildCard 卡 首先你需要一张可以支付的外国卡 选择开通 WildCard 卡&#xff0c;优点&#xff1a; 1 无需上传身份证件&#xff0c;支付宝认证即可 2 可以使用国内手机号注册 3 可以使用支付宝、微信充值 开通地址&#xff1a; https://bewildcard.com/card 一步一步…...

编程日记 2023/10/27 17:31:46

CDN是如何一步步壮大到现在这样的

当我们浏览网页、观看在线视频或下载文件时&#xff0c;CDN&#xff08;内容分发网络&#xff09;已经成为网络世界中不可或缺的一部分。本文将探讨CDN的发展历程&#xff0c;其工作原理&#xff0c;以及它如何利用不同地区来提供更快速、可靠的内容交付服务。 CDN的发展历程 过…...

编程日记 2023/10/27 17:30:45

【Java】电子病历编辑器源码（云端SaaS服务）

电子病历编辑器极具灵活性&#xff0c;它既可嵌入到医院HIS系统中&#xff0c;作为内置编辑工具供多个模块使用&#xff0c;也可以独立拿出来&#xff0c;与第三方业务厂商展开合作&#xff0c;为他们提供病历书写功能&#xff0c;充分发挥编辑器的功能。 电子病历基于云端SaaS…...

编程日记 2023/10/27 17:28:43

解决netty作为web，post请求体过大导致413 Request Entity Too Largew问题

问题 项目中使用netty作为web服务&#xff0c;postman请求体内容超出5mb请求netty时&#xff0c;返回413 Request Entity Too Large 解决 查询了一下资料&#xff1a;https://netty.io/4.0/api/io/netty/handler/codec/http/HttpObjectAggregator.html ChannelPipeline p .…...

编程日记 2023/10/27 17:27:42

【Linux】rpm和yum的使用

不知道是不是有和我一样的宝子们&#xff0c;在rpm上卡了老久老久&#xff0c;但其实搞通了&#xff0c;理解了原理之后&#xff0c;不难的&#xff0c;所以不管你现在遇到的困难是什么&#xff0c;都不要放弃&#xff0c;一定要坚持&#xff0c;加油。 一、rpm 1.rpm rpm的…...

编程日记 2023/10/27 17:25:40

贪心算法学习——最大数

目录 ​编辑 一&#xff0c;题目 二&#xff0c;题目接口 三&#xff0c;解题思路级代码 一&#xff0c;题目 给定一组非负整数 nums&#xff0c;重新排列每个数的顺序&#xff08;每个数不可拆分&#xff09;使之组成一个最大的整数。 注意&#xff1a;输出结果可能非常大…...

编程日记 2023/10/27 17:24:39

next项目部署到云服务器上(手动)

准备环境: 云服务器 ECS,服务器安装好了docker 自己的next项目 开始: 1.在next项目根目录下创建Dockerfile文件 FROM node:18-alpine AS base# Install dependencies only when needed FROM base AS deps # Check https://github.com/nodejs/docker-node/tree/b4117f9333d…...

编程日记 2023/10/27 17:23:37

CG Magic分享3dmax软件安装与打开文件转圈圈怎么办？

大家使用3dmax软件时&#xff0c;尤其&#xff0c;是初学者无论是安装3dmax软件还是打开max文件时&#xff0c;会遇到一类问题&#xff1a; 3dmax一直转圈不动&#xff1f; 3dmax总是转圈怎么办 大家遇到3dmax一直转圈圈是如何解决的呢&#xff1f;小编这里整理了一些3dmax软…...

编程日记 2023/10/27 17:22:36

京东（天猫）数据分析：2023下半年茶饮料市场高速增长，东方树叶一骑绝尘

当前在食品饮料行业中&#xff0c;整体的增长放缓&#xff0c;且各个细分品类上都已经充分竞争。但茶饮料市场例外&#xff0c;近两年呈现高增长的态势&#xff0c;一来取决于行业头部企业也在积极推动茶饮料不断升级&#xff0c;另外是主打更健康、更时尚的茶饮料深受年轻消费…...

编程日记 2023/10/27 17:20:35

软件测试之【单元测试、系统测试、集成测试】

一、单元测试的概念 单元测试&#xff08;Unit Testing&#xff09;是对软件基本组成单元进行的测试&#xff0c;如函数&#xff08;function或procedure&#xff09;或一个类的方法&#xff08;method&#xff09;。当然这里的基本单元不仅仅指的是一个函数或者方法&#xff…...

编程日记 2023/10/27 17:19:34

安装 tensorflow==1.15.2 遇见的问题

一、直接安装 命令&#xff1a;pip install tensorflow1.15.2 二、换 阿里云 镜像源 命令&#xff1a;pip install -i http://mirrors.aliyun.com/pypi/simple tensorflow1.15.2 三、换 豆瓣 镜像源 命令&#xff1a;pip install http://pypi.douban.com/simple tensorflow1…...

编程日记 2023/10/27 17:18:32

OJ刷题 第十八篇（递归篇）

34101 - 全排列问题&#xff08;目前遇到最难的一个递归&#xff09; 时间限制 : 1 秒 内存限制 : 128 MB 输出自然数 1 到 n 所有不重复的排列&#xff0c;即 n 的全排列&#xff0c;要求所产生的任一数字序列中不允许出现重复的数字。 输入 n(1≤n≤9) 输出 由 1&#xf…...

编程日记 2023/10/27 17:17:31

Ostrakon-VL像素终端实操：自定义扫描任务清单配置方法

Ostrakon-VL像素终端实操&#xff1a;自定义扫描任务清单配置方法 1. 像素特工终端介绍 Ostrakon-VL像素终端是一款专为零售与餐饮场景设计的智能扫描工具&#xff0c;采用独特的8-bit像素风格界面&#xff0c;将复杂的图像识别任务转化为直观有趣的"特工任务"。基…...

编程新知 2026/4/2 7:27:10

PyTorch模型调试神器：用TensorBoard+torchsummary快速定位网络结构问题

PyTorch模型调试神器&#xff1a;用TensorBoardtorchsummary快速定位网络结构问题 当你在PyTorch中构建复杂的神经网络时&#xff0c;是否经常遇到以下困扰&#xff1a;模型训练时突然报出维度不匹配的错误&#xff0c;却不知道具体是哪一层出了问题&#xff1f;或者模型参数数…...

编程新知 2026/4/2 7:07:02

互联网大厂Java求职者面试全场景详解（含技术栈解析与问答）

互联网大厂Java求职者面试全场景详解&#xff08;含技术栈解析与问答&#xff09; 文章标签 Java SE, Jakarta EE, JVM, Spring Boot, Maven, 微服务, 消息队列, 互联网大厂面试, 求职招聘, 技术问答 文章简述 本文围绕互联网大厂Java求职者面试场景&#xff0c;设计了由严肃面…...

编程新知 2026/4/2 6:56:49

PlugY终极指南：暗黑破坏神2单机模式完全解放方案

PlugY终极指南&#xff1a;暗黑破坏神2单机模式完全解放方案 【免费下载链接】PlugY PlugY, The Survival Kit - Plug-in for Diablo II Lord of Destruction 项目地址: https://gitcode.com/gh_mirrors/pl/PlugY 还在为暗黑破坏神2单机模式的储物箱空间不足而烦恼吗&am…...

编程新知 2026/4/2 6:32:35

告别环境配置噩梦：手把手教你用OpenVINO 2024.4 + VS2019部署PyTorch图像分类模型（附完整代码）

从PyTorch到生产环境&#xff1a;OpenVINO 2024.4全链路部署实战指南 当你的PyTorch模型在实验环境中表现优异&#xff0c;如何将它无缝迁移到实际应用场景&#xff1f;本文将带你跨越从研究到生产的鸿沟&#xff0c;使用Intel OpenVINO工具包2024.4版本&#xff0c;在Visual S…...

编程新知 2026/4/2 6:06:16

公司SEO推广有哪些常见的误区需要避免

公司SEO推广有哪些常见的误区需要避免 在数字化营销的时代&#xff0c;公司SEO推广已经成为提升网站流量和品牌知名度的重要手段。在实际操作中&#xff0c;许多企业在SEO推广过程中常常犯下一些常见的误区&#xff0c;这些误区不仅影响了SEO的效果&#xff0c;还可能导致资源…...

编程新知 2026/4/2 4:05:07

ROS2开发环境搭建避坑指南：Win11 + WSL2 + Ubuntu 22.04 从安装到测试的完整记录

ROS2开发环境搭建实战&#xff1a;Win11与WSL2深度适配指南 环境准备与系统调优 在Windows 11上搭建ROS2开发环境&#xff0c;选择WSL2作为Linux子系统是最佳实践方案。不同于传统虚拟机方案&#xff0c;WSL2提供了接近原生Linux的性能表现&#xff0c;同时完美集成Windows桌…...

编程新知 2026/4/2 3:40:16

曾经我和大模型交流业务实现记录

第一次&#xff1a; 我有一组子组件11个&#xff0c;通过子组件的不同组合&#xff0c;可以组成表单&#xff0c;这些表单让不同的用户使用&#xff0c;表单组成公共的内容&#xff0c;让大部分用户使用&#xff0c;当然用户可以在这些表单的基础上修改一些默认值&#xff0c;变…...

编程新知 2026/4/2 3:19:31

Python原生AOT编译2026架构设计图（含C-API二进制兼容性矩阵+GC停顿压缩至≤80μs实证）

第一章&#xff1a;Python原生AOT编译2026架构全景概览Python原生AOT&#xff08;Ahead-of-Time&#xff09;编译在2026年已演进为一套融合语言语义、运行时契约与硬件感知能力的系统级基础设施。它不再依赖传统解释器或JIT中间态&#xff0c;而是通过静态类型推导、控制流图全…...

编程新知 2026/4/2 2:39:04

城通网盘限速破解终极指南：ctfileGet工具让你免费享受10倍下载速度

城通网盘限速破解终极指南&#xff1a;ctfileGet工具让你免费享受10倍下载速度 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 你是否曾经被城通网盘的限速下载折磨得痛不欲生&#xff1f;面对几十KB/s…...

编程新知 2026/4/2 1:34:13