0

我一直在尝试使用

display:inline=block

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

nth-child
nth-of-type

但是，当我使用它时，它会与我的其他网格混淆。那么如何在不添加新课程的情况下做到这一点呢？

4

2 回答 2

4

据我从您的代码中看到的，您不能使用 nth-child 来实现您的目标。我将尝试用一个例子来解释：您希望部分 class="four" 的第 4 个和第 8 个孩子被涂成红色。为了使用 nth-child 或 nth-of-type，您必须从其父级（即 body）开始引用子级。所以很难说body的children列表中是section class="four"的第4个和第8个children是什么数字，一点都不灵活。我认为您以错误的方式使用它，例如 section.four:last-child，这是不正确的。请检查：w3schools 链接

此外，nth-child 和 nth-of-type 不能与选择器一起使用，而只能与元素一起使用，因此无法执行类似 .four:nth-child 之类的操作（如果您使用 class="four" 创建 div在您的部分之外）。

因此，不添加更多类的唯一方法是 jquery，如下所示：

$('.four').last().css('background-color', 'red');
于 2013-10-26T17:09:06.590 回答
0

在 CSS3 中，如果您将每个 nth-child 与某个类型的类相关联，并且将每个 nth-of-type 与另一个类相关联，则可以使用不同的样式设置每个类。例如，

<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”

于 2013-10-26T16:40:22.643 回答