css nth孩子和类

我有一个问题与CSS nth孩子选择器。我有一个容器内的3x3 elemtens网格。这些元素有一个名为.square的类。使用.square:nth-child(3n+1)我选择该行的每个第一个元素并将其变为绿色。使用.square:nth-child(3n+3)我选择该行的每个最后一个元素并将其着色为红色。css nth孩子和类

这可以正常工作，直到在网格之前输出任何元素（例如<br>）。随着每个新的<br>，订单向上移动一个，因为<br>被认为是.square。

据我了解.nth-child，它应该选择.square类的每第三个元素。为什么它适用于任何元素，我如何实现我的初始目标？

在此先感谢

http://www.hier-krieg-ich-alles.de/shop.php?cat=26491127728

的问题发生在中间的箱子。

来源

2012-02-24 chabuya

请把你的代码，以便更好地理解 – sandeep 2012-02-24 09:40:32

听起来像你想nth-of-type。

您可能会发现有用的相关选择器是:first-of-type,:last-of-type,:nth-last-of-type和:only-of-type。

来源

2012-02-24 09:34:22 Joe

是。为了澄清，'nth-child'只对元素进行计数，所以'.classname：nth-child'选择碰巧拥有'classname'的元素，也恰好是第n个孩子。 – 2012-02-24 09:38:41

是的，这就是链接页面所说的:)'nnth-child'通常被使用，因为它被首次发布（据我所知），但它实际上只在有限的情况下才有用; “n型”更有用，因为它符合大多数人认为的“第n个孩子”的功能。 – Joe 2012-02-24 09:40:05

相当。实际上，“第一胎”是第一胎。奇怪的是，开始时甚至没有“最后一个孩子”。 – 2012-02-24 09:41:40

第n个孩子只能用HTML元素的工作，第n个孩子的CSS不知道class和id，如果你想设置第n个孩子上课，使用jQuery添加一些自定义属性该类..

像

jQuery('.square:nth-child(3n+3)').attr("act","dummy");

然后使用CSS

div[act='dummy']{ 
border : 1px solid red;}

来源

2017-08-07 12:24:40 veera

css nth孩子和类

回答

相关问题