样式中 nth-child(n) 的用法

最新推荐文章于 2023-06-08 00:16:24 发布
最新推荐文章于 2023-06-08 00:16:24 发布
阅读量2.3k 收藏 3
点赞数
分类专栏： CSS/样式 管理者/开发者
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenzhenNBA/article/details/8748025
版权

新版本的样式CSS3功能很强大，下面介绍其中的 nth-child(n) 伪类的用法，网上已经有很多了，转载一下，原文部分见

http://www.cnblogs.com/kiracn/archive/2009/12/17/1626742.html


语法：
E:nth-child(an+b)
这个用法比较经典，复杂，实现功能多，用法分五种情况介绍,支持的浏览器为多数厂家新版本的浏览器，如firefox,chrome等

第一种：简单数字序号写法
E:nth-child(number)
直接匹配第number个元素。参数number必须为大于0的整数。
例子： li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

  • li item 001
  • li item 002
  • li item 003
  • li item 004
CSS 代码  
ul.ul01{margin:0px; padding:0px; width:350px;}
ul.ul01 li:nth-child(3){background-color:#F60;}

第二种：倍数写法
E:nth-child(an)
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，只能用n字母，它是倍数写法的标志，如3n、5n。
例子：
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
  • li item 001
  • li item 002
  • li item 003
  • li item 004
  • li item 005
  • li item 006
  • li item 007
  • li item 008
  • li item 009
  • li item 010
CSS 代码  
ul.ul02{margin:5px 0px; padding:0px; width:350px;}
ul.ul02 li:nth-child(3n){background-color:#F60;}

第三种：倍数分组匹配
E:nth-child(an+b) 与 :nth-child(an-b)
先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。） 
例子： li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/
  • li item 001
  • li item 002
  • li item 003
  • li item 004
  • li item 005
  • li item 006
  • li item 007
  • li item 008
  • li item 009
  • li item 010
  • li item 011
  • li item 012
  • li item 013
  • li item 014
  • li item 015
  • li item 016
CSS 代码  
ul.ul03{margin:5px 0px; padding:2px; width:350px; border:1px dotted #999;}
ul.ul03 li:nth-child(3n+5){background-color:#F60;}

第四种：反向倍数分组匹配
E:nth-child(-an+b)
此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。
例子：
li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/
  • li item 001
  • li item 002
  • li item 003
  • li item 004
  • li item 005
  • li item 006
  • li item 007
  • li item 008
  • li item 009
  • li item 010
CSS 代码  
ul.ul04{margin:5px 0px; padding:2px; width:350px; border:1px dotted #999;}
ul.ul04 li:nth-child(-3n+8){background-color:#F60;}

第五种：奇偶匹配
E:nth-child(odd) 与 E:nth-child(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。 如下偶数行LI背景为橙色，奇数行为蓝色
  • li item 001
  • li item 002
  • li item 003
  • li item 004
  • li item 005
  • li item 006
  • li item 007
  • li item 008
  • li item 009
  • li item 010
CSS 代码  
ul.ul05 li:nth-child(odd){background-color:#F60;}
ul.ul05 li:nth-child(even){background-color:#09F;}
/* or, (same effect) */
ul.ul05 li:nth-child(2n+1){background-color:#F60;}
ul.ul05 li:nth-child(2n){background-color:#09F;}

完整的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nth-child(n)</title>
<style type="text/css">
*{font-family:arial, verdana; font-size:12px; line-height:16px;}
div.title{font-size:13px; color:#06C; font-weight:bold;}
pre{font-family:verdana,arial; font-size:11px; color:#09F; margin:0px; padding:2px; 
border:1px dotted #FF66CC; display:inline-table; }
ul{margin:5px 0px; padding:2px; width:400px; border:1px dotted #999;}
li{ margin:1px 0px; padding:0px 3px;}
</style>
</head>
<body>
<p>
<div class="title">CSS3的 <b>nth-child(n)</b> 伪类用法介绍</div>
</p>

<p>
<div class="title">语法：</div>
E:nth-child(an+b)<br />
这个用法比较经典，复杂，实现功能多，用法分五种情况介绍,支持的浏览器为多数厂家新版本的浏览器，如firefox,chrome等
</p>

<p>
<div class="title">第一种：简单数字序号写法</div>
E:nth-child(number)<br/>
直接匹配第number个元素。参数number必须为大于0的整数。<br/>

例子：
li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/<br/>
<style type="text/css">
ul.ul01{margin-top:5px;}
ul.ul01 li:nth-child(3){background-color:#F60;}
</style>
<ul class="ul01">
<li> li item 001</li>
<li> li item 002</li>
<li> li item 003</li>
<li> li item 004</li>
</ul>
CSS 代码
<pre>
ul.ul01{margin:0px; padding:0px; width:350px;}
ul.ul01 li:nth-child(3){background-color:#F60;}
</pre>
</p>

<p>
<div class="title">第二种：倍数写法</div>
E:nth-child(an)<br/>
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，只能用n字母，它是倍数写法的标志，如3n、5n。<br/>

例子：<br/>
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/<br/>
<style type="text/css">
ul.ul02{margin-top:5px;}
ul.ul02 li:nth-child(3n){background-color:#F60;}
</style>
<ul class="ul02">
<li> li item 001</li>
<li> li item 002</li>
<li> li item 003</li>
<li> li item 004</li>
<li> li item 005</li>
<li> li item 006</li>
<li> li item 007</li>
<li> li item 008</li>
<li> li item 009</li>
<li> li item 010</li>
</ul>
CSS 代码
<pre>
ul.ul02{margin:5px 0px; padding:0px; width:350px;}
ul.ul02 li:nth-child(3n){background-color:#F60;}
</pre>
</p>

<p>
<div class="title">第三种：倍数分组匹配</div>
E:nth-child(an+b) 与 :nth-child(an-b)<br/>
先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）
<br/>例子：
li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/<br/>
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/<br/>
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/<br/>
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/<br/>
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/<br/>
<style type="text/css">
ul.ul03{margin-top:5px;}
ul.ul03 li:nth-child(3n+5){background-color:#F60;}
</style>
<ul class="ul03">
<li> li item 001</li>
<li> li item 002</li>
<li> li item 003</li>
<li> li item 004</li>
<li> li item 005</li>
<li> li item 006</li>
<li> li item 007</li>
<li> li item 008</li>
<li> li item 009</li>
<li> li item 010</li>
<li> li item 011</li>
<li> li item 012</li>
<li> li item 013</li>
<li> li item 014</li>
<li> li item 015</li>
<li> li item 016</li>
</ul>
CSS 代码
<pre>
ul.ul03{margin:5px 0px; padding:2px; width:350px; border:1px dotted #999;}
ul.ul03 li:nth-child(3n+5){background-color:#F60;}
</pre>
</p>

<p>
<div class="title">第四种：反向倍数分组匹配</div>
E:nth-child(-an+b)<br/>
此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。<br/>
例子：<br/>
li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/<br/>
li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/<br/>
<style type="text/css">
ul.ul04{margin-top:5px;}
ul.ul04 li:nth-child(-3n+8){background-color:#F60;}
</style>
<ul class="ul04">
<li> li item 001</li>
<li> li item 002</li>
<li> li item 003</li>
<li> li item 004</li>
<li> li item 005</li>
<li> li item 006</li>
<li> li item 007</li>
<li> li item 008</li>
<li> li item 009</li>
<li> li item 010</li>
</ul>
CSS 代码
<pre>
ul.ul04{margin:5px 0px; padding:2px; width:350px; border:1px dotted #999;}
ul.ul04 li:nth-child(-3n+8){background-color:#F60;}
</pre>
</p>

<p>
<div class="title">第五种：奇偶匹配</div>
E:nth-child(odd) 与 E:nth-child(even)<br/>
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。 如下偶数行LI背景为橙色，奇数行为蓝色<br/>
<style type="text/css">
ul.ul05{margin-top:5px;}
ul.ul05 li:nth-child(odd){background-color:#F60;}
ul.ul05 li:nth-child(even){background-color:#09F;}
/*
ul.ul05 li:nth-child(2n+1){background-color:#F60;}
ul.ul05 li:nth-child(2n){background-color:#09F;}
*/
</style>
<ul class="ul05">
<li> li item 001</li>
<li> li item 002</li>
<li> li item 003</li>
<li> li item 004</li>
<li> li item 005</li>
<li> li item 006</li>
<li> li item 007</li>
<li> li item 008</li>
<li> li item 009</li>
<li> li item 010</li>
</ul>
CSS 代码
<pre>
ul.ul05 li:nth-child(odd){background-color:#F60;}
ul.ul05 li:nth-child(even){background-color:#09F;}
/* or, (same effect) */
ul.ul05 li:nth-child(2n+1){background-color:#F60;}
ul.ul05 li:nth-child(2n){background-color:#09F;}
</pre>
</p>
参考: <a href="http://www.cnblogs.com/kiracn/archive/2009/12/17/1626742.html" target="_blank">
http://www.cnblogs.com/kiracn/archive/2009/12/17/1626742.html
</a>
</p>
</body>
</html>








shenzhenNBA
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
在标题和描述中提到的代码示例中，开发者尝试使用`nth-child()`选择器为`<ul>`列表中的第一和第三个`<li>`元素设置不同的背景颜色。在IE9及以上版本，这个代码可以正常工作，但在IE8中，背景颜色无法显示。 为了...
css3属性nth-child的用法大全
swust512017的博客
07-12 1432
n-child使用大全
nth-child的使用方法
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
06-09 8万+
一、需求描述 在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。 我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。 二、使用方法的代码示例 1.常见使用方法 first-child first-child：选择列表中的第一个标签。 举例：第一行字体显示为红色，代码如下： li:first-child{ c
css选择器:nth-child(n)选择前几个元素
WANGBUZHIQ的博客
11-22 8750
学习记录2 css选择器:nth-child(n)选择前几个元素 如：在项目中要实现如下效果 在三列布局中间加边框线，只使用border-right是不行的，三个div都会被选中，因此使用css选择器给前两个div进行添加样式，实现代码如下： .totalShow > div:nth-child(-n+2) { border-right: 1px solid #E4E7ED; } 其中 >大于号代表只选择下一代子元素 (-n+2) 代表选择前两个。 针对nth-ch
:nth-child(n) 的使用
liangyk1005的博客
05-19 1157
:nth-child(n) 选中父元素下的第n个子元素，n从1开始，元素类型没有限制 可在前面指定要选中的标签类型，如 p:nth-child(n) ,注意这里的p不是父元素，而是子元素的标签类型 可以指定父元素 ，如 #box p:nth-child(n) 选中box下的第n个p元素，这里的#box指的才是父元素 注意区分哪个是指定子元素类型，哪个是指定父元素 ...
【CSS】:nth-child()选择器的用法
y_coder的博客
05-22 1920
::nth-child 还支持使用公式来选择元素，例如 2n+1 表示选择奇数位置的元素，3n 表示选择位置是 3 的倍数的元素等等。这使得 &::nth-child 在选择灵活位置上的元素时非常有用。使用 &::nth-child 可以根据元素在其父级元素中的位置应用样式。例如，你可以使用它来选择列表中的奇数或偶数行，或者选择特定位置上的元素。这意味着第一个元素的位置是 1，第二个元素的位置是 2，以此类推。，其中 n 是一个表示位置的参数。
:nth-child()选择器用法
weixin_51109349的博客
11-12 8629
: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()
12-11
CSS3的:nth-child()伪类选择器是一种强大的样式选择工具，允许开发者更加精确地选取页面中的元素，尤其在处理列表或其他具有多个同级元素的场景下。它基于元素的兄弟关系和它们在父元素中的相对位置来应用样式，极大...
nth-child-grids：与nth-child一起练习
02-14
在这个“nth-child-grids”练习中，我们将深入探讨如何结合使用这两个特性来创建复杂的网格系统。下面将详细阐述它们的工作原理以及如何将它们融合在一起。 首先，让我们来理解CSS Grid布局。CSS Grid是一种二维...
jquery nth-child()选择器的简单应用
10-29
在这段代码中，`$('.article_li li:nth-child(5n)')`选择了`.article_li`类下的所有`<li>`元素，但只对那些位置满足5的倍数的元素（即第5个、第10个、第15个等）应用了`addClass('liborder')`，将类`liborder`添加到...
CSS 选择器 nth-child 的几种用法
weixin_33701617的博客
05-15 822
开发过程中会碰到一些选择器的要求 比如选择第一项，或者第几项 或者最后一项这些常见的用法 first-child first-child：选择列表中的第一个标签。 last-child last-child：选择列表中的最后一个标签。 nth-child(n) nth-child(n)：选择列表中的第 n 个标签。 nth-chi...
CSS3:nth-child选择器基本用法简述
qq_42000887的博客
09-15 3160
nth-child介绍
Css-:nth-child 的用法
wax9092的博客
06-04 5344
主要例举了一下css :nth-child 伪类选择器用法
CSS :nth-child选择器终于搞清楚怎么用，实例详解
weixin_47378963的博客
02-16 2189
该选择器选择的是A选择器选择的元素的父元素中的第n个子元素，而且在匹配的阶段并没有元素类型的限制，但是，到了样式设置的阶段，却又有了元素类型的限制，比如p:nth-child(n)匹配p元素的父元素中的第n个元素，如果第n个元素刚好是p，则进行样式设置，如果不是p，比如是h2，则不会进行相关的样式设置。刚接触到CSS的:nth-child伪类选择器的时候，也是晕头转向的，搞不清楚“:nth-child(n) 选择器选择的是其父元素中的第 n 个子元素,而且元素没有类型限制”这句话是什么意思。
css3中nth-child()的用法
m0_52518047的博客
04-23 1万+
nth-child（n）是css3中的一种选择器，它的作用是匹配属于其父元素的第n个元素，不论元素的类型。重点是“不论元素的类型这句话”，好多人容易误解这句话。 现在提出一个需求，如下图所示，将第二行和第三行的字体颜色改为红色和蓝色 <div class="father1"> <p>1234</p> <p>12345</p> <p>12345</p> </div> css代码实现：很容易
CSS3 :nth-child(n)用法
IT_datouer的博客
11-05 7145
CSS3 :nth-child(n)用法 :nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素； p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素 注意：n是从1开始的 如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p; 不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素 <style> p:nth-child(1){
css3--nth-child的用法
平安喜乐
06-08 2535
选择器查看的是元素在其父元素中的位置，而不是它在文档中的位置或它在其类别中的位置。所以，如果你有一个列表，它包含两种不同的类元素，希望这篇文章能帮助你更好地理解这个强大的选择器，并在你的下一个项目中找到它的用途。选择器是一个强大的工具，允许我们根据它们在父元素中的位置选择元素。是从1开始计数的（在HTML中，第一个元素的索引为1），但在。实际上不会选择任何第0个子元素，因为没有第0个子元素。是一个整数，表示要选择的子元素的位置。会考虑所有的子元素，而不仅仅是特定的类别。实际上在选择所有偶数位置的元素，而。
:nth-child(n) 选择器
weixin_41548610的博客
08-11 2057
定义 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 用法 1、p:nth-child(2)表示匹配p标签的父元素的第2个子元素是否为p标签，如是的话则选中，否则无效。 2、当:nth-child(n)前面加空格时，其含义为从当前元素的子孙后代中所有元素的第n个子元素选出来。 ...
详解CSS3中:nth-child的用法
aa_mmnn的博客
09-10 1965
CSS3中:nth-child的实际用途：不适用低版本的IE浏览器！ （1）:nth-child(n + 4)选取大于等于4的标签，其中"n"为整数，下同 .demo01 li:nth-child(n+4){background:#090} （2）:nth-child(-n + 4)选取小于等于4的标签 .demo01 li:nth-child(-n+4){background:#090} （3）:nth-child(2n)选取偶数标签，其中的2n也可以写
html中nth-child的用法
最新发布
08-06
nth-child是CSS中的一个伪类选择器，它用于选择元素的某个特定位置。nth-child可以接受一个参数，用来指定要选择的元素的位置。参数可以是一个具体的数字，也可以是一个公式。 在引用和引用的代码中，可以看到使用nth-child选择器来选择第几个子元素，并设置相应的样式。例如，li:nth-child(1)表示选择第一个li元素，li:nth-child(2n-1)表示选择奇数位置的li元素。 在引用的代码中，可以看到使用nth-child选择器来选择特定的p元素。例如，p:nth-child(1)表示选择第一个子元素为p的元素，并设置其颜色为红色。 总结来说，nth-child用法是通过指定一个参数来选择元素的位置，可以选择具体的位置或者使用公式进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值