nth-child是什么意思

Ptrtoptr Ptrtoptr 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
我有教课书,看不懂,

代码不加nth-child 之前
$('table tr:even').addClass('even'); 'even'类效果是蓝色背景
<table >
<tr> <td>odd</td> </tr>// 此行变蓝
<tr> <td>even</td> </tr>
<tr> <td>odd</td> </tr>// 此行变蓝
<tr> <td>even</td> </tr>
</table>
以上我想把even行变蓝odd行却变蓝了,我已知道原因是因为 jquery下标从0开始.
但下面我改了代码成:
$('table tr:nth-child(even)').addClass('even');
然后就成了下面的效果
<table >
<tr> <td>odd</td> </tr>//
<tr> <td>even</td> </tr> //此行变蓝
<tr> <td>odd</td> </tr>//
<tr> <td>even</td> </tr> // 此行变蓝
</table>
请问这是怎么回事 那tr:后缀的nth-child什么意思
...全文

相关推荐

jquery入门—选择器实现隔行变色实例代码

JQuery入门—选择器实现隔行变色如何实现呢?JQuery选择器继承了CSS、path语音的部分语法,允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择,接下来详细介绍,需要的朋友可以参考下

weixin_38725137

Jquery下:nth-child(an+b)的使用注意

后面两个Class为空来应对可能增加的列数来调节列宽 $(“div>p”).parent().not($(“.grid_2”)).filter(“nth-child(“+lenth+”n+1)”)来选择每行的第2列,但是却选中了第三列,百思不得其解 利用firbug查询该元素无意发现元素下的nodeindex(nodeindex为同级元素中的先后顺序)和参数an+b计算后的值相同,原来想直接利用nodeindex选择第2列好了但是不知道如何做好 查了下百度无意发现nth-child也是利用nodeindex选择的 具体实现如下 代码如下: filters:{   //如$(“input[na

weixin_38743372

详解CSS3中nth-child与nth-of-type的区别

在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢?下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考借鉴,下面来一起看看吧。

weixin_38531630

CSS3伪类选择器:nth-child()

CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child

weixin_38646645

详解CSS nth-child与nth-of-type的元素查找方式

nth-child和nth-of-type是css的两个伪选择符。应用中,这两者常常容易混淆。这里把它们拿出来仔细做个对比,看看这两者是怎么查找元素的。 nth-child(n) —— 寻找第n个子元素 nth-of-type(n) —— 寻找同一类型元素里的第n个元素 看这个定义也许还不是很清楚他们的区别,我们一点点来区分。 p:nth-child(2) 与 p:nth-pf-type(2) HTML代码如下 <div> <div xss=removed> <p>pgh1</p> <p>pgh2</p> <p>

weixin_38592256
评论 5
收藏 已收藏
分享
返回顶部
Ptrtoptr
JavaScript 87,983 成员 224,681 内容