如何在nth-child(i)中传入一个变量i

如何在nth-child(i)中传入一个变量i

+i+就可以了，不然i是一个字符串

假设有以下 html 代码：

little

piggy

以下代码得到的效果一样： p:nth-child(2){color:red;} p:nth-of-type(2){color:red;} 结果虽然相同，但是两者本身还是有所区别的。 :nth-child 选择符 从词义上来说，表示选择满足以下条件的元素： 是一个段落元素 p 是父元素的第二个子元素 :nth-of-type 选择符 从词义上来看，表示： 选择父元素的第二个段落元素 p :nth-of-type 是… 怎么说好呢，哈~ … 较少条件要约的。 假设结构变化如下：

words little

piggy

那么，这种方式就“破”了： p:nth-child(2){color:red;} 但是，这个还是”能用”的： p:nth-of-type(2){color:red;} 所谓的“破”，意思是上面的 :nth-child 选择符现在选到的是 “little”，而不是 “piggy”，因为这个元素满足以下所有条件： 1)它是第二个字元素 2）它是一个段落元素 p 所说的“能用”，意思是 “piggy” 仍然被选中，因为它是它父元素下的第二个段落元素 p 。 如果在 h1 之后增加一个 h2，那么 :nth-child 选择符就什么也选中不了了，因为那时第二个子元素就不再是段落元素 p 了。但是 :nth-of-type 仍然还是有效的。 我感觉 :nth-of-type 相对不那么脆弱，而且总的来说更加有用，尽管 :nth-child 更加常见（作者个人意见）。你有多少时候在想“我想选择父元素的第二个子元素，如果它恰巧是个段落元素 p” 这事呢？可能有那么几次，但是更多的可能是你想“选中第二个段落”或者“每隔两行选择一行 (select every third table row)”，也就是说 :nth-of-type 是更加好的一个选择（再次声明，作者个人意见）。 我发现当我抱怨“为什么 :nth-child 选择符不行？”时，绝对多数的情况是因为在选择符前限定了标签，而那个位置的子元素不是那个标签。因此在使用 :nth-child 时，我觉得最好还是只指定父元素并且不要用标签来限制 :nth-child 。 dl :nth-child(2) {} dd:nth-child(2) {} 当然，具体情况还得具体分析。（我咋这么不喜欢这句话呢 – 糖伴西红柿） 浏览器对于 :nth-of-type 的支持是相当不错的… firefox 3.5+, opera 9.5+, chrome 2+, safari 3.1+, ie 9+。 如果需要更多的支持，jquery 应该会挺你的（使用选择符，添加一个类名，使用类名来添加样式 $(“selector:nth-child(xxxxx)”).addclass(“someclass”)），但是实际上 jquery 却放弃了对 :nth-of-type 的支持，这很奇怪啊，据说是因为 :nth-of-type 的使用率很低。有个插件可以使得 jquery 支持它。 相关：不要忘了它这些了不起姊妹们 :first-of-type``:last-of-type :nth-last-of-type 和 :only-of-type 。更多请看这里。 这里有一个 lea verou 做的可视化示例。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息