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

【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;}

效果

在这里插入图片描述

相关文章:

【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)&#xff1a;选择器匹配属于父元素的特定类型的第N个子元素:nth-child(n)&#xff1a;选择器匹配属于其父元素的第 N 个子元素&#xff0c;不论元素的类型:first-child&#xf…...

解析Excel文件内容,按每列首行元素名打印出某个字符串的统计占比(超详细)

目录 1.示例&#xff1a; 1.1 实现代码1&#xff1a;列数为常量 运行结果&#xff1a; 1.2 实现代码2&#xff1a;列数为变量 运行结果&#xff1a; 1.示例&#xff1a; 开发需求&#xff1a;读取Excel文件&#xff0c;统计第3列到第5列中每列的"False"字段占…...

qt中遇到[Makfile.Debug:119:debug/app.res.o] Error 1的原因以及解决方法

当我们将项目已到本地qt环境中会出现下图的代码错误 解决方法&#xff1a;在主界面中&#xff0c;点击左边的项目栏&#xff0c;选择构建设置&#xff0c;看Shadow build下面的路径是否为中文&#xff0c;改成英文&#xff0c;或者直接将Shadow build这个 √ 去掉就行了,如图已…...

pytorch调用gpu训练的流程以及示例

首先需要确保系统上安装了CUDA支持的NVIDIA GPU和相应的驱动程序。 基本步骤如下 检查CUDA是否可用&#xff1a; 使用 torch.cuda.is_available() 来检查CUDA是否可用。 指定设备&#xff1a; 可以使用 torch.device(“cuda:0”) 来指定要使用的GPU。如果系统有多个GPU&…...

学习Android的第一天

目录 什么是 Android&#xff1f; Android 官网 Android 应用程序 Android 开发环境搭建 Android 平台架构 Android 应用程序组件 附件组件 Android 第一个程序 HelloWorld 什么是 Android&#xff1f; Android&#xff08;发音为[ˈnˌdrɔɪd]&#xff0c;非官方中文…...

回归预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络多变量回归预测

回归预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络多变量回归预测 目录 回归预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-LSTM【24年新算…...

Typora导出html文件图片自动转换成base64

Typora导出html文件图片自动转换成base64 一、出现问题二、解决方案三、编码实现3.1.创建Java项目3.2.代码3.3.打包成Jar包 四、如何使用endl 一、出现问题 typora 导出 html 的时候必须带有原图片&#xff0c;不方便交流学习&#xff0c;文件太多显得冗余&#xff0c;只有将图…...

『C++成长记』string使用指南

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、string类介绍 二、string类的常用接口说明 &#x1f4d2;2.1string类对象的常…...

硬件连通性测试:构建数字世界的无形基石

在当今数字化的时代&#xff0c;硬件设备的连通性对于系统的正常运行至关重要。硬件连通性测试作为确保设备协同工作的关键步骤&#xff0c;扮演着构建数字世界的无形基石的角色。本文将深入探讨硬件连通性测试的意义、方法以及在现代科技生态系统中的重要性。 1. 硬件连通性测…...

mysql的安装与卸载

mysql的安装 mysql 8.0的安装步骤&#xff1a; 1. 从mysql官网上下载mysql安装软件 https://www.mysql.com/ 2. 双击msi文件进行安装 3. 选择安装的类型 选择server only可以远程访问数据库 4. 选择服务并安装 5. 安装中&#xff0c;安装完成后直接next 6. 进入mysql的配置 …...

假期作业 2.2

第一章 命名空间 一&#xff0e;选择题 1、编写C程序一般需经过的几个步骤依次是&#xff08; B &#xff09; A. 编辑、调试、编译、连接 B. 编辑、编译、连接、运行 C. 编译、调试、编辑、连接 D. 编译、编辑、连接、运行 2、所谓数据封装就是将一组数据和与这组数…...

运维SRE-02 正则表达式、grep

1.特殊符号补充 1.1位置相关的特殊符号 . 当前目录 .. 当前目录的上级目录 ~ 当前用户家目录 / 根目录 cd - 返回上次所在目录1.2熟练掌握 # 注释符号,root命令提示符 | 管道符号.1.3了解其他特殊符号 $ 取值(取出变量的值),普通用户的提示符 ! % ^ & * (){} [] ; ? \…...

【SpringCloud】使用OpenFeign进行微服务化改造

目录 一、需求与背景二、OpenFeign 远程调用技术原理三、项目代码演示3.1 引入依赖3.2 实现OpenFeign注解修饰接口3.3 指定 OpenFeign 远程调用接口的扫描路径 四、OpenFeign 在日志中打印Request和Response五、OpenFeign 客户端超时配置六、使用 OpenFeign 实现服务降级6.1 实…...

DRV8313和L298N都是电机驱动,一个是驱动三相FOC无刷直流电机的,一个是驱动有刷电机,使stm32控制无刷电机简单入门知识

DRV8313和L298N都是电机驱动器&#xff0c;但它们之间存在一些关键的区别&#xff1a; DRV83131&#xff1a; 由德州仪器&#xff08;TI&#xff09;制造。 具有集成的场效应晶体管&#xff08;FET&#xff09;。 最大电压为65V。 峰值电流为3A。 适用于三相电机驱动。 L298N…...

React16源码: React中event事件系统初始化源码实现

event 事件系统初始化 1 &#xff09;概述 react事件系统比较的复杂&#xff0c;它是基于dom的事件系统在dom事件系统上面进行了一个深度的封装它里面的很多实现逻辑都是自由的一套在初始化 react-dom 的源码的时候&#xff0c;会为react的事件系统注入 reactdom 相关的一些插…...

Qt6入门教程 15:QRadioButton

目录 一.简介 二.常用接口 三.实战演练 1.径向渐变 2.QSS贴图 3.开关效果 4.非互斥 一.简介 QRadioButton控件提供了一个带有文本标签的单选按钮。 QRadioButton是一个可以切换选中&#xff08;checked&#xff09;或未选中&#xff08;unchecked&#xff09;状态的选项…...

Json序列化和反序列化 笔记

跟着施磊老师学C 下载&#xff1a;GitHub - nlohmann/json: JSON for Modern C 在single_include/nlohmann里头有一个json.hpp&#xff0c;把它放到我们的项目中就可以了 #include "json.hpp" using json nlohmann::json;#include <iostream> #include <…...

新媒体与传媒行业数据分析实践:从网络爬虫到文本挖掘的综合应用,以“中国文化“为主题

大家好&#xff0c;我是八块腹肌的小胖&#xff0c; 下面将围绕微博“中国文化”以数据分析、数据处理、建模及可视化等操作 目录 1、数据获取 2、数据处理 3、词频统计及词云展示 4、文本聚类分析 5、文本情感倾向性分析 6、情感倾向演化分析 7、总结 1、数据获取 本…...

Visual Studio使用Git忽略不想上传到远程仓库的文件

前言 作为一个.NET开发者而言&#xff0c;有着宇宙最强IDE&#xff1a;Visual Studio加持&#xff0c;让我们的开发效率得到了更好的提升。我们不需要担心环境变量的配置和其他代码管理工具&#xff0c;因为Visual Studio有着众多的拓展工具。废话不多说&#xff0c;直接进入正…...

Nginx简单阐述及安装配置

目录 一.什么是Nginx 二.Nginx优缺点 1.优点 2.缺点 三.正向代理与反向代理 1.正向代理 2.反向代理 四.安装配置 1.添加Nginx官方yum源 2.使用yum安装Nginx 3.配置防火墙 4.启动后效果 一.什么是Nginx Nginx&#xff08;“engine x”&#xff09;是一个高性能的HTTP…...

手搓STM32H743开源飞控系列教程---(五) 飞控IMU方向调整

1. 为什么需要调整飞控IMU方向 第一次玩飞控的朋友可能会遇到一个奇怪现象&#xff1a;明明把飞控板水平放在桌面上&#xff0c;地面站显示的姿态却歪了30度。这种情况十有八九是IMU安装方向与飞控默认设定不匹配导致的。我刚开始玩穿越机时就踩过这个坑&#xff0c;当时把飞控…...

前端拖拽交互实现:别再只会用原生拖拽了

前端拖拽交互实现&#xff1a;别再只会用原生拖拽了 毒舌时刻这代码写得跟网红滤镜似的——仅供参考。各位前端同行&#xff0c;咱们今天聊聊前端拖拽交互。别告诉我你还在用原生的HTML5拖拽API&#xff0c;那感觉就像在用诺基亚手机——能打电话&#xff0c;但体验太差。 为什…...

RTX4090D显存优化:OpenClaw+Qwen3-32B-Chat批量处理千页PDF

RTX4090D显存优化&#xff1a;OpenClawQwen3-32B-Chat批量处理千页PDF 1. 为什么需要显存优化 当我第一次尝试用OpenClaw对接Qwen3-32B-Chat处理PDF文档时&#xff0c;遇到了一个棘手的问题——显存爆炸。当时只是处理一个200页的PDF&#xff0c;显存占用就飙到了22GB&#x…...

用FastMCP中间件给你的AI应用加把锁:手把手实现MySQL数据库鉴权(附完整代码)

用FastMCP中间件构建企业级AI服务安全网关 当团队内部的AI工具从原型走向生产环境时&#xff0c;安全往往成为最容易被忽视的环节。上周我接手了一个金融数据分析平台的审计工作&#xff0c;发现开发团队竟然直接将未加密的股票查询接口暴露在公网&#xff0c;仅通过IP白名单控…...

突破远程桌面限制:RDP Wrapper实现多用户并发连接的创新解决方案

突破远程桌面限制&#xff1a;RDP Wrapper实现多用户并发连接的创新解决方案 【免费下载链接】rdpwrap RDP Wrapper Library 项目地址: https://gitcode.com/gh_mirrors/rd/rdpwrap 副标题&#xff1a;适用于Windows Vista至Windows 11全版本的远程桌面功能扩展工具 在…...

Vue3+AI聊天室:如何实现消息自动滚动和流式响应?

Vue3AI聊天室&#xff1a;消息自动滚动与流式响应的工程实践 引言&#xff1a;当Vue3遇见AI对话 在构建现代化AI聊天应用时&#xff0c;流畅的交互体验往往比功能堆砌更重要。想象这样一个场景&#xff1a;用户发送问题后&#xff0c;界面立即开始逐字显示AI回复&#xff0c;同…...

ai辅助开发:告诉快马你的想法,自动生成jdk17最佳实践代码

今天想和大家分享一个特别实用的开发技巧——如何用AI辅助快速掌握JDK17的新特性。作为一个经常需要升级Java版本的开发者&#xff0c;我发现每次版本更新都要花大量时间学习新语法&#xff0c;直到遇到了InsCode(快马)平台的AI辅助功能。 传统开发方式的痛点 以前用JDK8写代码…...

告别SIFT/ORB!用LoFTR+Transformer搞定低纹理场景的图片匹配(附Python实战代码)

低纹理场景图像匹配实战&#xff1a;LoFTR与Transformer的革新应用 在计算机视觉领域&#xff0c;图像特征匹配一直是三维重建、视觉定位等任务的基础环节。传统方法如SIFT、ORB依赖于特征检测器提取关键点&#xff0c;但在低纹理、重复图案或运动模糊场景中表现往往不尽如人意…...

Zotero插件Ethereal Style:打造高效文献管理新体验

Zotero插件Ethereal Style&#xff1a;打造高效文献管理新体验 【免费下载链接】zotero-style zotero-style - 一个 Zotero 插件&#xff0c;提供了一系列功能来增强 Zotero 的用户体验&#xff0c;如阅读进度可视化和标签管理&#xff0c;适合研究人员和学者。 项目地址: ht…...

海康MVS相机+Halcon标定实战:18张图搞定畸变矫正(附标定板选购指南)

海康MVS相机Halcon标定实战&#xff1a;18张图搞定畸变矫正与标定板选购指南 工业视觉系统的精度往往取决于相机标定的准确性。在实际项目中&#xff0c;我们常遇到这样的困境&#xff1a;明明按照教程步骤操作&#xff0c;标定结果却总是不尽如人意。本文将分享一套经过实战验…...