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

我一直在试图创建一个使用如何为每行/每行的每个最后一个元素设置不同的样式？

display:inline=block

我需要每一行/列的每一个最后一个元素不同风格的网格。我试过

nth-child 
nth-of-type

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

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

编辑2：我已经决定，内嵌块都有些太复杂，所以我切换到浮动。我的网格现在可用！

来源

2013-10-26 Michelle Cantin

我们就需要看您的具体HTML/CSS，理想情况下，JFiddle，发表评论。 '：最后一个孩子'可能有助于购买它可能不适用于你的电影 –

@Paulie_D http://michellecantin.ca/test/features/grids/这是我的文档 –

不...不是链接... HTML和CSS最好在一个缩减的情况下JSFiddle。我们不需要通过Developer Tools来查找特定规则。 –

在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这个，那么你会创建一个使用"var elements= document.getElementsByClassName("nth-child")" 的你将通过“elements.length”设置每个元素的风格为“无”

来源

2013-10-26 16:40:22 user2917241

“在CSS3中”你可以分别使用'：nth-child（）'和'：nth-of-type（）'伪类。这就是问题中的含义。 – BoltClock

@ user2917241我真的不明白你想说什么。你正在使用nth-type和n-child作为类。我不想添加任何更多的类。 –

好了，现在我想我明白你米歇尔。只要按照Sissy的建议，如果你真的不想再添加类。然而，我描述的方法最初只适用于你想要的元素分配给特定的用户定义的类。尽管如此，如果你选择添加更多的类，它将会工作。否则，jquery就是你的答案 – user2917241

环就一个JS功能获得在你的页面的所有元素正如我从你的代码中看到的那样，你不能使用nth-child来实现你的目标。我将尝试用一个例子来解释：您希望课程class =“four”的第4个和第8个孩子涂成红色。为了使用第n个孩子或第n个孩子，你必须引用从他们父母开始的孩子，即身体。所以很难说身体的孩子名单中的数字是第四节和第八节的节=“四”，并且它根本不灵活。我想你是以错误的方式使用它，像section.four：last-child，这是不正确的。请检查：w3schools link

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

所以唯一的办法，而无需添加更多的类是jQuery的，就像这样：

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

来源

2013-10-26 17:09:06 sissy

尽管我同意并且已经投了票，但也许值得使用替代引用（W3School在这里没有很好的声誉），例如W3.org的['：nth-child（）'] （http://www.w3.org/TR/selectors/#nth-child-pseudo）或[MDN上的''：nth-child（）']（https://developer.mozilla.org/en-US /文档/网络/ CSS /：第n个孩子）。 –

谢谢，我会记住:) – sissy

它只会改变最后一个。我期待着改变每一行的每一个元素。 –

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

回答

相关问题