css3选择器如何选择同一个父级下的相同class的第一个元素 nth-child nth-of-type

2023-10-30

1
2
3
4
5

选择第一个类名: .demo .item: nth-of-type(1) { … } || .demo .item: nth-child(1) { … };

选择最后一个类名: .demo .item: last-child { … };

选择其中一个指定的类名:.demo .item: nth-of-type(x) { … } || .demo .item: nth-child(x) { … };

那么nth-of-type与nth-child 什么区别呢
:nth-child(n)选择器,该选择器选取父元素的第n 个子元素,不论元素的类型。
:nth-of-type(n)选择器,选择器选取父元素的第 n 个指定类型的子元素。
看代码:

1
2

666

3
4
5
.demo .item:nth-child(4){ color: yellow; } .demo .item:nth-of-type(4){ color: blue; } ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200628225644926.png) 我们可以看到: 1、nth-child是在父级元素demo下开始计算n,不区分元素的类型 2、nth-of-type是在父级元素demo下,查找的.item类型的元素
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css3选择器如何选择同一个父级下的相同class的第一个元素 nth-child nth-of-type 的相关文章

  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 理解 z-index:该元素如何出现在其父级同级元素的前面?

    为什么当我删除时红色 div 位于绿色 div 前面z index from wrapperRed 感觉像z index是沿着链条向上继承的 如果我改变z index将绿色 div 更改为 6 即使删除第一句中描述的行后 它仍保留在红色 d
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • IE 11 中的 CSS Display Flex 无法正常工作,图像会溢出

    我正在使用 CSSdisplay flex 以某种方式显示它们 在 Chrome 中 它看起来很完美 很漂亮 但在 IE 中 图像超出了我放置它们的元素 https jsfiddle net m42k7Lk5 8 https jsfiddl
  • SVG 动画不适用于 Chrome 中的 favicon

    In the SVG 图标已设置 这是旋转内圆的SVG文件的内容 Favicon 动画在 Chrome 中根本不起作用 如何让它在 Chrome 中工作 在 Firefox 中可以正常工作 在 Edge 中则不行 但 Chrome 是最重要
  • 将 SVG 的高度设置为行高?

    我想将我的 SVG 图像作为图标包含在标题旁边 h1 img src icon sell svg class icon Verkaufen h1 字体大小为h1 is 36px和line heigt is 1 1 我使用检查器工具发现计算出
  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

随机推荐

  • 【剑指Offer题解:java】二叉树的镜像

    文章目录 题目 分析 代码 题目 操作给定的二叉树 将其变换为源二叉树的镜像 二叉树的镜像定义 源二叉树 8 6 10 5 7 9 11 镜像二叉树 8 10 6 11 9 7 5 分析 递归交换左右子树即可 1 root null直接返回
  • 【环境配置】基于Docker配置Chisel-Bootcamp环境

    文章目录 Chisel是什么 Chisel Bootcamp是什么 基于Docker配置Chisel Bootcamp 官网下载Docker安装包 Docker换源 启动Bootcamp镜像 常用docker命令 可能产生的问题 Chise
  • Mysql获取数据库的所有表以及表所有字段信息

    mysql获取所有表以及表所有字段信息 SELECT TB TABLE SCHEMA 模式 TB TABLE NAME 表名 TB TABLE COMMENT 表名注释 COL COLUMN NAME 字段名 COL COLUMN TYPE
  • 风投与IT

    风投即风险投资 广义的风险投资泛指一切具有高风险 高潜在收益的投资 狭义的风险投资是指以高新技术为基础 生产与经营技术密集型产品的投资 根据美国全美风险投资协会的定义 风险投资是由职业金融家投入到新兴的 迅速发展的 具有巨大竞争潜力的企业中
  • vue设置不出现滚动条的全屏背景100%

    1 想在登录页面设置页面背景占比100 而且不出现滚动 首先给你所需要的元素设置好css 2 如果没生效 看下App vue中是否有定义 app的宽高 将其设置成100 3 如果综上两部设置完成还未生效 那就需要在index html文件中
  • kubernetes集群实战——资源限制(内存、CPU、NameSpace)

    1 k8s容器资源限制 Kubernetes采用request和limit两种限制类型来对资源进行分配 request 资源需求 即运行Pod的节点必须满足运行Pod的最基本需求才能 运行Pod limit 资源限额 即运行Pod期间 可能
  • MySQL必知必会 学习笔记 第一章 了解SQL

    数据库是保存有组织的数据的容器 通常是一个或一组文件 数据库软件称为DBMS 数据库管理系统 数据库是被DBMS创建和操纵的容器 数据库究竟是文件或其他东西并不重要 因为你不会直接访问数据库 而是间接通过DBMS替你访问数据库 表是某种特定
  • BootstrapTable checkbox默认选中

    BootstrapTable 在Web后台管理项目中对表格展示数据使用居多 主要是表格的多条件查询 分页 排序等功能 我们的项目中前端框架是Bootstrap 所以很多插件都是支持Bootstrap的 bootstrap table是一款非
  • 关于List的subList原理分析

    今天在看Java开发手册的时候看到这么一句话 如果需要对list某个范围内的元素进行操作 可以使用subList 任何对子列表的操作最终都会反映到原列表中 例如list subList 0 2 clear 这样的操作便会对原列表进行修改 修
  • SARScape中用sentinel-1数据做SBAS-InSAR完整流程(1/2)

    SARScape中用sentinel 1数据做SBAS InSAR完整流程 1 SABA InSAR原理简述 2 数据采集和预设 2 1 SAR数据采集 2 2 DEM数据下载与放置 2 3 精密轨道数据下载与放置 2 4 制作研究区范围矢
  • 三分钟教你小程序实现无感刷新!

    无感刷新 无感刷新对于前端来说是一项非常实用的技术 其本质是为了优化用户体验 让用户感受不到token已经过期 本质上就是登录时 储存token和refresh token 当token过期或错误时不需要用户跳回登录页重新登录 而是在响应拦
  • python读取文件名存到list_python读取文件名称生成list的方法

    下面为大家分享一篇python读取文件名称生成list的方法 具有很好的参考价值 希望对大家有所帮助 一起过来看看吧 经常需要读取某个文件夹下所有的图像文件 我使用python写了个简单的代码 读取某个文件夹下某个后缀的文件 将文件名生成为
  • 力扣 删除链表的节点

    给定单向链表的头指针和一个要删除的节点的值 定义一个函数删除该节点 返回删除后的链表的头节点 注意 此题对比原题有改动 示例 1 输入 head 4 5 1 9 val 5 输出 4 1 9 解释 给定你链表中值为 5 的第二个节点 那么在
  • 手动实现Spring IOC 跟 AOP 的雏形

    关注后回复 进群 拉你进程序员交流群 作者丨sowhat1412 来源丨sowhat1412 Spring Spring make java more simpleSpring make java more modernSpring mak
  • 在Linux下用C语言写贪吃蛇;

    项目思路 ncurses上下左右键的获得 gt 贪吃蛇地图的实现 gt 显示贪吃蛇的完整身子 gt 贪吃蛇向右移动 gt 贪吃蛇撞墙找死 gt 贪吃蛇自行向右行走与页面一起刷新 利用线程解决 gt 贪吃蛇四个方向的自由走位 gt 贪吃蛇吃饭
  • 教程:群体演化方法分析玉米的驯化与改良

    一般文章在筛选 正选择区间 时 大多 不考虑 群体的 演化历史 即不考虑 群体大小 的变化 只进行亚群之间各种群体遗传参数的对比 这可能会产生大量的假阳性 另一方面 研究一般也 不考虑 遗传信息的 迁移 所以作者希望将群体演化历史及遗传信息
  • MySQL高性能索引策略

    文章目录 高性能索引策略 独立的列 前缀索引 多列索引 选择合适的索引列顺序 聚簇索引 覆盖索引 使用索引扫描来做排序 高性能索引策略 正确地创建和使用索引是实现高性能查询的基础 高效地选择和使用索引有很多种方式 其中有些是针对特殊案例的优
  • 二叉树的基本概念(定义,特性,存储结构等)

    一 二叉树的定义 二叉树 Binary Tree 是n n gt 0 个数据元素的有限集合 该集合可以为空 空二叉树 也可以由一个称为根 root 的元素及两个不相交的 被分别称为左子树和右子树的二叉树组成 如上图中含有7个结点 其中A是根
  • Python安装MySQL库详解(解决Microsoft Visual C++ 9.0 is required )

    前面我们介绍的Python网络爬虫通常将抓取的数据存储至TXT或CSV文件 而当数据量增加之时 就需要将其存储至本地数据库了 Python访问数据库需要对应的接口程序 我们可以把接口程序理解为Python的一个模块 它提供了数据库客户端的接
  • css3选择器如何选择同一个父级下的相同class的第一个元素 nth-child nth-of-type

    1 2 3 4 5 选择第一个类名 demo item nth of type 1 demo item nth child 1 选择最后一个类名 demo item last child 选择其中一个指定的类名 demo item nth