Question

我一直在尝试使用

创建一个网格

display:inline=block

我需要对每个行/行的每个最后一个元素进行不同的设置。我试过了

nth-child
nth-of-type

但是，当我使用它时，它会与我的其他网格混淆。那么如何在不添加新类的情况下实现呢？

编辑1：http://jsfiddle.net/#&togetherjs=kfTw3ULKmE

编辑2：我已经确定内联块太复杂了，所以我切换到了浮点数。我的网格现在可以使用了！

Answer 1

就我从你的代码中看到的那样，你不能使用nth-child来实现你的目标。我将尝试用一个例子来解释：你希望section class =“four”的第4个和第8个孩子被涂成红色。为了使用nth-child或nth-of-type，你必须引用从父母开始的孩子，即身体。所以很难说身体的孩子名单中的数字是第4类和第8类的分类=“4”，并且它根本不灵活。我认为你是以错误的方式使用它，比如section.four：last-child，这是不正确的。请检查：w3schools link

此外，nth-child和nth-of-type不能与选择器一起使用，但只能与元素一起使用，因此无法执行.four：nth-child之类的操作（如果你使用class =在你的部分之外的“四个”。

所以唯一的方法，就是不添加更多的类是jquery，就像这样：

$('.four').last().css('background-color', 'red');

Answer 2

在CSS3中，如果您将每个第n个子项与某个类型的类相关联，并且每个第n个类型与另一个类相关联，则可以使用不同的类来设置每个类型。例如，

<html>
<div class="nth-child"> 
   //some code
</div>

<div class="nth-of-type">
 //some code
</div>

</html>

然后在CSS文件中你会做类似的事情：

.nth-child
{
  //style rules
}
.nth-of-type
{
//style rules
}

我希望这就是你要找的东西，没有张贴的例子，你很难理解你的意思。但是如果你想为我们JS，你就可以创建一个JS函数使用"var elements= document.getElementsByClassName("nth-child")"获取您网页中的所有元素你会遍历“elements.length”，将每个元素样式设置为“none”

如何以不同方式为每个行/行的每个最后元素设置样式？

2 个答案: