:nth-child是css3的一个比较常用的选择器。它用于匹配属于其父元素中的子元素,不论元素的类型。 它的参数可以是数字、关键词或公式。下面讲介绍它的使用方法,

nth-child的使用

html结构如下:

<div class="demo">
<p></p>
<p></p>
<p></p>
<p></p>
</div>

只选取第2个元素

.demo p:nth-child(){color:#f00}
/*数字2为红色。参数只为数字,代表选取的是第几个元素,注意不是从0开始的*/

选取第2个及之后的元素

.demo p:nth-child(n+){color:#f00}
/*数字2,3,4为红色。n+数字,代表选取数字后面所有的元素*/

选取第2个及之前的元素

.demo p:nth-child(-n+){color:#f00}
/*数字1,2为红色。-n+数字,代表选取数字之前所有的元素*/

选择奇数的元素

.demo p:nth-child(odd){color:#f00}
.demo p:nth-child(2n-){color:#f00}
/*数字1,3为红色。odd等同于2n-1的写法*/

选择偶数的元素

.demo p:nth-child(even){color:#f00}
.demo p:nth-child(2n){color:#f00}
/*数字2,4为红色。even等同于2n的写法*/

选择间隔为a,偏移为吧的元素

使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值 。

.demo p:nth-child(3n+){color:#f00}
/*数字2为红色。从2开始,间隔为3*/

办公资源网址导航 https://www.wode007.com

nth-child的兼容

通过:first-child属性:

.demo p:first-child{color:#f00;}/*选取第一个*/ .demo p:first-child+p+p{color:#f00;}/*选取第三个*/

通过>来实现

.demo>p+p{ color:#f00;}/*第2级之后的元素*/

通过jquery的js来实现

 $(document).ready(function(){
$(".demo p:nth-child(2)").css("color","#f00");
});
/*需要引入jquery文件*/

Css3其他类似选择器

:nth-of-type() 选择器 ——选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。与:nth-child(n)不同的是后者与类型无关。

:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。 提示:等同于 :nth-of-type(1)。

:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。 提示:等同于 :nth-last-of-type(1)。

:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n 可以是数字、关键词或公式。 提示:请参阅 :nth-last-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数。

:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数。n 可以是数字、关键词或公式。 提示:请参阅 :nth-last-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关,从最后一个子元素开始计数。

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。 提示:p:last-child 等同于 p:nth-last-child(1)。

CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法的更多相关文章

  1. CSS学习笔记(9)--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  2. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

  3. 详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...

  4. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  5. 转: 详解css中的display属性

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...

  6. 举例详解CSS中的的优先级

    计算优先级 优先级是根据由每种选择器类型构成的级联字串计算而成的.他是一个对应匹配表达式的权重. 如果优先级相同,靠后的 CSS 会应用到元素上. 注意:元素在文档树中的位置是不会影响优先级的优先级顺 ...

  7. 举例详解CSS中的继承

    CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元 ...

  8. (转)实例详解CSS中position的fixed属性使用

    关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...

  9. 详解CSS中的几种长度px、em、pt

    说说css的几种距离吧,大致有px.em.pt.pc.in.mm.cm.ex八种,其中最常见到的是px,我还见到过的有ex和mm.cm,当然后两个在当年见的更多. 其实px,我们最熟悉,而在电脑上也应 ...

随机推荐

  1. Github 创建SSH密钥克隆仓库详解

    1.登录Github主页,点击任意一个repository,点击Clone or download,点击Use SSH 2.点击add a new pulbic key,创建公钥 3.下面图中的Tit ...

  2. 恕我直言,我怀疑你并不会用 Java 枚举

    开门见山地说吧,enum(枚举)是 Java 1.5 时引入的关键字,它表示一种特殊类型的类,默认继承自 java.lang.Enum. 为了证明这一点,我们来新建一个枚举 PlayerType: p ...

  3. 小程序 大转盘 抽奖 canvas animation

    项目需求运用到大转盘 可设置概率 可直接自定义结果 效果如下

  4. Elasticsearch 别管原理,先run起来

    少点代码,多点头发 本文已经收录至我的GitHub,欢迎大家踊跃star 和 issues. https://github.com/midou-tech/articles 看文章有两点需要注意: 本公 ...

  5. Elasticsearch 常见错误

    一 read_only_allow_delete" : "true" 当我们在向某个索引添加一条数据的时候,可能(极少情况)会碰到下面的报错: { "error ...

  6. 关于Java优质代码的那些事

    以前别人告诉我,代码都是粘贴复制,然后写多了,就有了自己的思想,然后1,2年过去了,我的代码质量并没有什么提高,问了一些博客园里的前辈,前辈们都是语重心长的说:"少年,多看书呀!" ...

  7. 2个线程A-B-A-B或者B-A-B-A循环输出

    代码: /** * 两个线程循环打印输出a-b-a-b */ public class AandBforTOthread { private static Object o = new Object( ...

  8. Nginx思维导图

    1. Nginx简介 1.1 nginx概述 1.2 nginx的安装及程序环境 1.3 零复制&五种IO模型 1.4 nginx的基本配置 2. Nginx配置详解 2.1 main配置段详 ...

  9. [计网笔记] 传输层---TCP 传输层思维导图

    传输层思维导图 TCP笔记 为什么是三次握手和四次挥手 https://blog.csdn.net/baixiaoshi/article/details/67712853 [问题1]为什么连接的时候是 ...

  10. matlab实现梯度下降法(Gradient Descent)的一个例子

    在此记录使用matlab作梯度下降法(GD)求函数极值的一个例子: 问题设定: 1. 我们有一个$n$个数据点,每个数据点是一个$d$维的向量,向量组成一个data矩阵$\mathbf{X}\in \ ...