【CSS】css选择器和css获取第n个元素(:nth-of-type(n)、:nth-child(n)、first-child和last-child)

:nth-of-type、:nth-child的区别

  • 一、css选择器
  • 二、:nth-of-type、:nth-child的区别
    • :nth-of-type(n):选择器匹配属于父元素的特定类型的第N个子元素
    • :nth-child(n):选择器匹配属于其父元素的第 N 个子元素,不论元素的类型
    • :first-child:获取元素的第 1 个子元素
    • :last-child:获取元素的最后一个个子元素
    • 效果

一、css选择器

选择器用法
选择器用法
ID选择器#myid
类选择器.myclassname
标签选择器div,h1,p等等
相邻选择器h1+p(选择紧接在另一个元素后的元素)
兄弟选择器h1~p(ul后的所有p兄弟元素)
子选择器ul > li
后代选择器li a
通配符选择器*
属性选择器a[rel=“external”]、a[target="_blank"等等]
伪类选择器a:hover, li:nth-child等等
<div id="box"><p>1</p><div>我是div</div><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
</div>

二、:nth-of-type、:nth-child的区别

:nth-of-type(n):选择器匹配属于父元素的特定类型的第N个子元素

所有兄弟节点中找到第三个p标签背景为红色。所以,3背景为红。

  • nth-of-type(2n)表示选中偶数标签
  • nth-of-type(2n-1)表示选中奇数标签
  • nth-of-type(n+2)表示选中从第2个开始到最后
  • nth-of-type(-n+2)表示选择从0到2的标签,即小于3的标签。
#box p:nth-of-type(3) {background: red;
}

:nth-child(n):选择器匹配属于其父元素的第 N 个子元素,不论元素的类型

找父元素的第三个子元素,如果该子元素为p,则其变为黄色,如果,第三个子元素不是p元素,则没有子元素的背景变为黄色。

  • nth-child(2n)表示选中偶数标签
  • nth-child(2n-1)表示选中奇数标签
  • nth-child(n+2)表示选中从第2个开始到最后
  • nth-child(-n+2)表示选择从0到2的标签,即小于3的标签。
  • nth-last-child(2)表示选中倒数第2个标签
#box p:nth-child(3) {background: yellow;
}

:first-child:获取元素的第 1 个子元素

#box p:first-child {background: pink;}

:last-child:获取元素的最后一个个子元素

#box p:last-child {background: green;}

效果

在这里插入图片描述

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

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

相关文章

字节大佬含泪吐血总结系列之 ARP 协议详解(网络层)

字节大佬含泪吐血总结系列之 ARP 协议详解(网络层) 原文地址&#xff1a;https://github.com/Snailclimb/JavaGuide 文章目录 字节大佬含泪吐血总结系列之 ARP 协议详解(网络层)MAC 地址ARP 协议工作原理同一局域网内的 MAC 寻址不同局域网内的 MAC 寻址 每当我们学习一个新的…

帅气的性能监控平台Grafana(Windows下使用Grafana监控系统指标与GPU指标)

帅气的性能监控平台Grafana&#xff08;Windows下使用Grafana监控系统指标与GPU指标&#xff09; 前情提要 系统环境准备 windows_exporter下载 nvidia_gpu_exporter下载 prometheus下载 Grafana下载 安装指导 windows_exporter安装与nvidia_gpu_exporter安装 promethe…

vscode 如何修改c/c++格式化风格,大括号不换行

在Visual Studio Code&#xff08;VSCode&#xff09;中&#xff0c;若要修改C代码格式化的风格以实现大括号不换行&#xff0c;通常会借助于插件C/C扩展中的ClangFormat配置。以下是具体的步骤&#xff1a; 确保已安装了C/C扩展&#xff1a; 打开VSCode的扩展市场&#xff08;…

最新AI系统ChatGPT网站H5系统源码,支持Midjourney绘画局部编辑重绘,GPT语音对话+ChatFile文档对话总结+DALL-E3文生图

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…

学习笔记 | 微信小程序项目day01

今日学习内容 如何创建一个uni-app项目如何运行到微信微信开发者工具如何申请小程序appid如何配置tabBar轮播图demo 如何创建uni-app项目 使用HBuilder X 创建 如何运行到微信微信开发者工具 1、安装uni-app vue3 编译器 插件 2、安装微信开发者工具 微信开发者工具下载地址…

annoy,一个超强的 Python 库!

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个超强的 Python 库 - annoy。 Github地址&#xff1a;https://github.com/spotify/annoy 在大数据时代&#xff0c;处理高维数据集的需求越来越迫切&#xff0c;尤其是在机器学习、推荐系统和自…

JS 异常处理

1、抛出异常 throw 1.throw抛出异常信息&#xff0c;程序也会终止执行 2.throw后面跟的是错误提示信息 3.Error对象配合 throw使用&#xff0c;能够设置更详细的错误信息 示例 function fn(x, y) {if (!x || !y) {throw new Error(没有参数传进来) }return x y } fn()打印结果…

基于LlamaIndex解决RAG的关键痛点

受到 Barnett 等人的论文《Seven Failure Points When Engineering a Retrieval Augmented Generation System》的启发&#xff0c;本文将探讨论文中提到的七个痛点&#xff0c;以及在开发检索增强型生成&#xff08;RAG&#xff09;流程中常见的五个额外痛点。更为关键的是&am…

Camera2+OpenGL ES+MediaCodec+AudioRecord实现录制音视频写入H264 SEI数据

记录一下学习过程&#xff0c;得到一个需求是基于Camera2OpenGL ESMediaCodecAudioRecord实现录制音视频。 需求&#xff1a; 在每一帧视频数据中&#xff0c;写入SEI额外数据&#xff0c;方便后期解码时获得每一帧中的自定义数据。点击录制功能后&#xff0c;录制的是前N秒至…

AI实践于学习3_大模型之AI解题提示词优化实践

前言 提示词只是让LLM具有一定的推理能力&#xff0c;并不能直接提高模型能力&#xff0c;可以借助CoT思维链、提示词规则一定程度微调模型。 尽量使用新模型&#xff0c;通用性能更好&#xff0c;支持提示词规则更多。 参考 https://www.rgznbk.com/archives/Prompt-Engin…

海外社媒营销平台及运营规则,如何降低封号率?

社交媒体已经成为人们生活和日常习惯不可或缺的一部分&#xff0c;在跨境电商出海过程中&#xff0c;海外社媒营销平台可以起到非凡的助力&#xff1b;而平台的选择以及平台的运营技巧、规则都各有不同。很多海外社媒工作者经常会被封号&#xff0c;这也是难度之一&#xff0c;…

2024美赛数学建模C题思路分析 - 网球的动量

1 赛题 问题C&#xff1a;网球的动量 在2023年温布尔登绅士队的决赛中&#xff0c;20岁的西班牙新星卡洛斯阿尔卡拉兹击败了36岁的诺瓦克德约科维奇。这是德约科维奇自2013年以来首次在温布尔登公开赛失利&#xff0c;并结束了他在大满贯赛事中历史上最伟大的球员之一的非凡表…

2024美赛C题完整解题教程 网球运动势头(持续更新)

2024美赛已经于今天早上6点准时公布题目。本次美赛将全程跟大家一起战斗冲刺O奖&#xff01;思路持续更新。 2024 MCM Problem C: Momentum in Tennis &#xff08;网球运动的势头&#xff09; 注&#xff1a;在网球运动中&#xff0c;"势头"通常指的是比赛中因一系…

为客户解决痛点,电子纸增加制表功能

为客户解决痛点&#xff0c;电子纸增加制表功能 部分客户购买我们的电子纸后反馈效果很好&#xff0c;但是在配套组态软件制作电子纸模板时&#xff0c;遇到需要制作表格的时候比较麻烦。像是在画板作画一样&#xff0c;比较费时&#xff0c;而且效果不是很好&#xff0c;没办…

机器学习算法决策树

决策树的介绍 决策树是一种常见的分类模型&#xff0c;在金融风控、医疗辅助诊断等诸多行业具有较为广泛的应用。决策树的核心思想是基于树结构对数据进行划分&#xff0c;这种思想是人类处理问题时的本能方法。例如在婚恋市场中&#xff0c;女方通常会先询问男方是否有房产&a…

2024.2.1日总结

web的运行原理&#xff1a; 用户通过浏览器发送HTTP请求到服务器&#xff08;网页操作&#xff09;。web服务器接收到用户特定的HTTP请求&#xff0c;由web服务器请求信息移交给在web服务器中部署的javaweb应用程序&#xff08;Java程序&#xff09;。启动javaweb应用程序执行…

k8s之基础组件说明

前言 K8S&#xff0c;全称 Kubernetes&#xff0c;是一个用于管理容器的开源平台。它可以让用户更加方便地部署、扩展和管理容器化应用程序&#xff0c;并通过自动化的方式实现负载均衡、服务发现和自动弹性伸缩等功能。 具体来说&#xff0c;Kubernetes 可以将应用程序打包成…

2024年美赛C题:Momentum in Tennis思路解析

Problem C: Momentum in Tennis 网球运动中的动力 【扫描下方二维码加入群聊&#xff0c;了解更多思路~】 中文题目&#xff1a; 在2023年温布尔登男子单打决赛中&#xff0c;20岁的西班牙新星卡洛斯阿尔卡拉斯击败了36岁的诺瓦克德约科维奇。这是德约科维奇自2013年以来在温布…

RFID技术的应用在汽车座椅加工中的优势

RFID技术的应用在汽车座椅加工中的优势 在传统的汽车座椅加工过程中&#xff0c;需要人工核对和记录座椅的信息&#xff0c;如型号、序列号、生产日期等。这种方式不仅效率低下&#xff0c;而且容易出错。而通过使用RFID技术&#xff0c;这些问题得到了有效解决。 在座椅的生…

使用VScode编译betaflight固件--基于ubuntu平台

使用VScode编译betaflight固件--基于ubuntu平台 1、使用git克隆betaflight的开源代码2、配置编译环境3、使用VScode编译代码 window平台的见上一篇文章 使用VScode编译betaflight固件–基于windows平台 本文主要介绍在linux系统 ubuntu平台下使用VScode编译betaflight固件的方法…