文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关于nth-child的疑惑

关于nth-child的疑惑 由 Ghostzhang 发表于 2015-04-20 23:20 今天在CSS森林群有同学问了个问题： 【活跃】ζ”綉;財ヾ nth-child 怎么选前三个 【...活跃】Davin :nth-child(-n+3) 【吐槽】鬼-CSSForest +4 正好很久没写代码了，也想试试回答下这个问题，于是就搜索了下，于是就找到了 W3School的CSS3 :nth-child...来看看它的说明： :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。...MSN文档对:nth-child的说明： 伪类:nth-clild(an+b)匹配在文档树中前面有an+b-1个兄弟元素的元素，此时n大于或等于0，并且该元素具有父元素。...简而言之，该选择器匹配多个位置满足an+b的子元素。 span:nth-child(-n+3) 匹配前三个子元素中的span元素。

38920

CSS中:nth-child的用法

做前端一定要记住:nth-child(2)这个选择器，它可以帮你轻松选择你想要的标签并给与修改添加样式 下面通过几个例子说明，相信你一看就明白 li:nth-child(2){background:#090...} :nth-child(2)表示选取第几个标签，”2可以是你想要的数字” li:nth-child(n+4){background:#090} :nth-child(n+4)选取大于等于4标签，”n”...表示从整数 li:nth-child(-n+4){background:#090} :nth-child(-n+4)选取小于等于4标签 li:nth-child(2n){background:#090}...:nth-child(2n)选取偶数标签，2n也可以是even li:nth-child(2n-1){background:#090} :nth-child(2n-1)选取奇数标签，2n-1可以是odd...li:nth-child(3n+1){background:#090} :nth-child(3n+1)自定义选取标签，3n+1表示”隔二取一” li:last-child{background:#090

50710
您找到你想要的搜索结果了吗？
是的
没有找到

你了解css3的nth-child吗

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，借助这个特性，可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。...专注前端与算法的系列干货分享，转载请声明原创： 「微信公众号：心谭博客」| xxoo521.com | GitHub nth-child 介绍 :nth-child(n) 选择器匹配属于其父元素的第...使用它的时候需要注意几点： 第 n 个子元素的计数是从 1 开始，不是从 0 开始的 选择表达式中的字母n代表 ≥0 的整数 基本操作 它有 3 种常见用法： 直接指明 n 的值：span:nth-child...== 后代元素 请思考下面这段代码的样式效果（1是黑色的，2和3都是红色的） span:nth-child(2n...3是其父节点的第 2 个子元素，第一个是 。 所以在借助nth-child匹配子元素时，要看清楚 DOM 树的层级关系。

64720

Less混合结合:nth-child()选择器的高级玩法

1、先看效果图 上图中比较麻烦的是每块的底色处理，下面看怎么处理 2、:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。...数字：最常见的使用方式，eg: :nth-child(1) 关键词: Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。...3、主要思路： 运用less混合传参，参数既是 :nth-child(n) 选择器的公式 在混合里面处理每个原色的底色，通过 :nth-child(n) 选择器结合 ::after 伪元素实现。...有了思路之后，下面让我们看一下具体的代码实现 4、代码实现 以下只贴颜色处理的核心代码 .colorLine(@index, @startColor, @endColor) { .li-item:nth-child...li-item 元素的伪元素背景色。

57500

CSS 选择器 nth-child 的几种用法

举例，最后一行字体显示为绿色，代码如下： li:last-child{     color: green; } nth-child(n) nth-child(n)：选择列表中的第 n 个标签。...举例：第三行字体显示为蓝色，代码如下： li:nth-child(3){     color: blue; } nth-child(odd) nth-child(odd)：选择列表的奇数行。...举例，奇数行背景显示为灰色，代码如下： li:nth-child(odd){     background: #999; } 我们可以通过另外的方法选择奇数行，例如： nth-child(n+1) 、...: #999; } nth-child(even) nth-child(even)：选择列表的偶数行。...上面是几种比较常见的选择方法，我们还可以通过 CSS 更灵活的进行选择，有下面几种方法： nth-child(-n+n) nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个

3.8K00

css3的nth-child选择器的详细探讨

css3的nth-child选择器的详细探讨 前言 在十年前开始的div+css布局兴起之时,我就开始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,只有ID选择器,CLASS...当我们把 nth-child 这个选择器用到极致的时候,可以说,我们在处理任何列表的时候,是不需要给这些列加上class的. 有哪些 nth-child ?...nth-child 不仅仅只有一个,而是有一系列的这样的选择器,可以供我们在各种情况下使用....,和JS或者其他编程语言是不一样的.一般的编程语言是从0开始为第一个,而这里,可能是顾及我们一般的csser的编程基础可能不时很好,所以,1就是1,而不是1是0....我们需要换一个选择器,这个选择器就是 nth-last-child. nth-last-child选择器的用法,和 nth-child 选择器的用法是完全一致的,只有一个不同,那就是 nth-child

44810

css3 nth-child选择器

css3 nth-child选择器 css3的nth-child选择器，乍看起来很简单，其实不是那么容易。...简单用法 p:nth-child(n) // 选择属于其父元素的第n个子元素的每个 元素 p:nth-child(2n) // 选择属于其父元素的子元素的每个偶数 元素 p:nth-child...n是从0开始的正整数，它代表着一个序列，0， 1， 2......这样的。 但是:nth-child(n+m)中的n+m是从1开始计算的,也就是说子元素的起始计算序号是1，不存在0这样子的元素。...当我们要选择哪些元素的时候，只要把参数根据n的递增算出来的值对应到子元素在父元素里面的位置序列就好了 比如查找第一个元素 :nth-child(1) 查找序列大于等于10的元素 :nth-child(n...，n还是0开始，但是子元素的最后一个是1，倒过来了 互相辅助，还是很好用的

52320

选择最后一个元素及nth-child和nth-of-type的区别

CSS3 :last-child 选择器 指定属于其父元素的最后一个子元素的 p 元素的背景色 p:last-child { background:#ff0000; } CSS3 :nth-last-child...() 选择器 规定属于其父元素的第二个子元素的每个 p 元素，从最后一个子元素开始计数： p:nth-last-child(2) { background:#ff0000; } p:last-child...(2) { background:#ff0000; } 对于:nth-child选择器，在简单白话文中，意味着选择一个元素： 这是个段落元素 这是父标签的第二个孩子元素 对于:nth-of-type选择器...，意味着选择一个元素： 选择父标签的第二个段落子元素 例子： p:nth-child(2)悲剧了，其渲染的结果不是第二个p标签文字变红，而是第一个p标签，也就是父标签的第二个子元素。...您可以狠狠地点击这里：:nth-child测试demo2 p:nth-of-type(2)的表现显得很坚挺，其把希望渲染的第二个p标签染红了，如下截图： ?

2.9K10

CSS3---first-child或者nth-child(1) 不起作用的原因

一、零碎      1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child...(even)、nth-last-child(3)（倒数第三个）           注意点： 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。           ...1、先找到该伪类调用者（元素）的父类           2、其次找到父类下的第n个子元素           3、最后看该子元素是不是1中的伪类调用者，如果是，则应用css，否则不应用          ...----》有时候first-child或者nth-child(1) 不起作用的原因 /*此时first-child不起作用，是因为.tap_con的父元素win的第一个子元素是.top，此时找到第一个子元素...important; } ========================================================== .tab_con:nth-child(1){ background

2.7K50

Hexo添加首页置顶轮播图

前言 在写系列博文时对于某一篇文章的寻找过程会比较繁琐（对于博主而言自然会简单些，但是对于访客来讲就没那么轻松），因此参考Akilar的博文弄了一个置顶轮播图。...可以把系列博文的链接汇总起来做一个索引，放置在轮播图中。这样既可以展示博主想对外展示的内容，又方便快速进行文章跳转。 效果可以在博客首页查看。 本篇教程会涉及大量源码的改动，对缩进有严格要求。...如果需要，可以移步下方链接至Akilar的博客教程去下载源码。...Swiper/4.1.6/js/swiper.min.js swiper_css: https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/...语法 button: 详情 结尾 个人觉得还蛮实用的一个修改。

97220
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券