结构伪类选择器nth-child (n)

最新推荐文章于 2022-01-07 15:58:43 发布
最新推荐文章于 2022-01-07 15:58:43 发布
阅读量544 收藏
点赞数
分类专栏： html基础 文章标签： css css3 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49833951/article/details/113428642
版权

nth-child 选择某个父元素的一个或多个特定的子元素

在这里插入图片描述

  • n 可以是数字，关键字和公式
  • n 如果是数字，就是选择第n个子元素，里面数字从1开始…
  • n 可以是关键字:even偶数, odd奇数
  • n 可以是公式：n为0则从0开始计算并选择，数字超出元素的个数会被忽略
  • 公式：n+5 从第5个开始（包括第五个）到最后
  • 公式： -n+5 前5个（包括第5个）
橙子斌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3新特性-结构伪类选择器nth-child（n）
al654123的博客
02-28 473
一、nth-child（n） 选择某个父元素的一个或多个特定的子元素 n 可以是数字，关键字和公式 n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始… n 可以是关键字：even 偶数，odd 奇数 n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 ) <!DOCTYPE html> <html la...
CSS3 伪类选择器 nth-child()说明
09-25
CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。
结构伪类选择器中的 n
Felix__XP的博客
04-26 489
曾经一直有个误解，以为 :nth-child(n)是匹配元素的第n个后来才发现 E:nth-child(n) 选择作为父元素的第一个子元素的元素E 有点绕，这里匹配的时候需要满足两个条件： 1.该元素是元素E 2.该元素是父元素的第一个子元素<div class="wrap"> <div>第一个子元素</div> <span>第二个子元素</span> <div>第
:nth-child(n) 选择器
weixin_41548610的博客
08-11 2043
定义 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 用法 1、p:nth-child(2)表示匹配p标签的父元素的第2个子元素是否为p标签，如是的话则选中，否则无效。 2、当:nth-child(n)前面加空格时，其含义为从当前元素的子孙后代中所有元素的第n个子元素选出来。 ...
结构伪类选择器之E:nth-child(n){}
qq_40254169的博客
06-18 341
作用： E:nth-child(n)表示定位E的父元素的某些特定子元素 说人话，就是：
结构伪类_结构化伪类
culi3118的博客
09-01 839
结构伪类The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or y...
CSS3伪类选择器：nth-child()
09-27
网页制作Webjx文章简介：CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有...面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。 CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
12-11
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
css选择器 nth-child
weixin_34138139的博客
12-15 73
html代码： <div> <p>多云转晴</p> <p>多云转晴</p> <p>多云转晴</p> <p>多云转晴</p> <p>多云转晴</p> </div> 一、nth-child ...
关于:nth-child(n)伪类的一些理解
opt1997的博客
09-26 1441
要想知道nth-child(n)到底作用到了哪些标签上，我们就不得不从选择器开始说起。 选择器 当我们使用了选择器，到底选中的是什么? 结论：不论选择器多复杂，最终选择到的都是标签 举一个例子：html的代码如下： 首先来看个简单的CSS代码： body {} 十分明显，我们这里选择的是body标签。如果再加一点： body ul{} 显而易见，我们这里选择的是body里所有的ul。也就是说...
nth-child
weixin_30522183的博客
08-27 68
CSS3 伪类选择器 nth-child() 的用法 伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)（比如nth-of-type(1)）这个特殊的类选择符可以样式更加 个性的标题和段落等，不过，目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。 :nth-child()...
:nth-child() | CSS属性参考
初晴
09-19 951
CSS :nth-child()伪类选择器基于索引来匹配父元素中的子元素。 :nth-child()伪类选择器的参数在W3C官方表示为an+b。an+b为一个公式. a,b为常量, n的取值是从0开始的整数。 如果将参数进行拆分，可以分为以下5种情况： 1、提供一个正数作为参数。 你可以为:nth-child()提供一个正数作为参数。它表示要选择父元素中索引为该数值的子元素
:nth-child()选择器用法
weixin_51109349的博客
11-12 8573
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 . . :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 公式 (an + b)。 描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。 1. :nth-child(2) 获取到第二个标签 2.:nth-child(2n) 选取偶数标签，等同于:nth-child(even) 3.:nth-ch
CSS3学习 :nth-child() 选择器
致力于成为web大大滴前端
04-26 405
例子：默认select选中项： 1、用CSS3选择器选取第1、2.。。 (“#popUp-absentCard”).find(“#cancelWay option:nth-child(2)”).prop(“selected”, ‘selected’);  2、eq方法做(“#popUp-absentCard”).find(“#cancelWay option:nth-child(2)”
. nth-child 详解
MR_JIABing的博客
12-09 536
注意：本质上就是选中第几个子元素 n 可以是数字、关键字、公式 n 如果是数字，就是选中第几个 常见的关键字有 even 偶数、odd 奇数 常见的公式如下(如果 n 是公式，则从 0 开始计算) 但是第 0 个元素或者超出了元素的个数会被忽略 ...
H5中nth-child(n)详解
weixin_44079801的博客
06-26 1873
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nth-child(n)</title> <style> /* n 可以是关键词。将
css中结构伪类用法（案例）
weixin_43939111的博客
02-01 860
结构伪类有如下几种： :first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type :empty 具体含义解释可以看网上的教程文档，这里只列举直观案例，便于区别理解记忆 一、结构伪类选择的是该种类在其父元素下属于该种类的元素 可以看到背
CSS结构伪类选择器
qq_47897078的博客
12-18 880
CSS结构伪类选择器 结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类class的依赖，有助于保持代码干净整洁。 表 — 结构伪类选择器 选择器 功能描述 版本 E:last-child 选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1) E:nth-child(n) 选择父元素的第n个子元素，n从1开始计算 E:nth-last-child(n) 选择父元素的倒数第n个子元素，n从1开始计算 E:fi
结构伪类选择器
qq_64970126的博客
01-07 2482
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素 选择符 解析 E:first-child 匹配父元素中的第一个子元素 E E:first-child 匹配父元素中最后一个E元素 E:nth-child(n) 匹配父元素中的第n个子元素E E:first-of-type 指定类型E的第一个 E:last-of-type 指定类型E的最后一个 E:nth-of-type(n) 指定类型E的第n个 第一种对E:f
伪类选择器nth-child
最新发布
07-29
伪类选择器:nth-child用于选择某个元素的父元素下的特定位置的子元素。它接受一个参数，用于指定要选择的子元素的位置。 例如，如果我们想选择某个父元素下的第二个子元素，可以使用:nth-child(2)。 以下是一些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值