如何为类使用nth-of-type - 而不是元素

Question

我正在为图像库制作一个简单的HTML.图库的每一行都可以有2,3或4个图像.(在一个2图像行中,每个图像元素都被命名type-2,同样的type-3和type-4.)

现在我想选择每行的最后一个元素来设置自定义边距.我的HTML是这样的:

<div id="content">
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- I want this, 2n+0 of type-2 -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this, 3n+0 of type-3 -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this, 4n+0 of type-4 -->
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- this -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this -->
</div>

我认为以下CSS可以工作,但它没有:

.type-2:nth-of-type(2n+0) {margin-right:0;}
.type-3:nth-of-type(3n+0) {margin-right:0;}
.type-4:nth-of-type(4n+0) {margin-right:0;}

这个CSS选择的是:

<div id="content">
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- selected by .type-2:nth-of-type(2n+0) -->
    <div class="type-3"></div> <!-- selected by .type-3:nth-of-type(3n+0) -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- selected by .type-4:nth-of-type(4n+0) -->
    <div class="type-4"></div>
    <div class="type-2"></div> <!-- selected by .type-2:nth-of-type(2n+0) -->
    <div class="type-2"></div>
    <div class="type-3"></div> <!-- selected by .type-3:nth-of-type(3n+0) -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- selected by .type-4:nth-of-type(4n+0) -->
    <div class="type-4"></div>
    <div class="type-4"></div>
</div>

我可以编辑我的HTML以实现我想要的,但出于好奇,是否有某种CSS？

编辑:这个问题可能是什么样子问的问题重复nth-child和nth-of-type可应用于类-不是元素.我已经知道答案是否定的.我真正要求的是一个纯粹的CSS解决方案/ hack,而选择的答案就是这样.

Answer 1

这与CSS选择器级别3不可能(至少没有CSS黑客,额外标记或JavaScript).

CSS Selectors Level 4草案提出了:nth-match()伪类,它可以做你想要的:

:nth-match(2n+0 of .type-2) {margin-right:0;}
:nth-match(3n+0 of .type-3) {margin-right:0;}
:nth-match(4n+0 of .type-4) {margin-right:0;}

我所知道的任何浏览器都没有实现这一点,但是在Chrome中存在一个实现它的错误.

Answer 2

只有CSS黑客,无需修改标记,您可以执行以下操作:

[class*=' type-'], [type^='type-']{ /* Set all the divs to float: left initially */
    float: left;
    content: url('http://static.adzerk.net/Advertisers/db5df4870e4e4b6cbf42727fd434701a.jpg');
    height: 100px; width: 100px;
}

.type-2 + .type-2 + div{
    clear: both; /* Clear float for a div which follows two div with class type-2 */
}

.type-3 + .type-3 + .type-3 + div {
    clear: both; /* Clear float for a div which follows three div with class type-3 */
}

.type-4 + .type-4 + .type-4 + .type-4 + div {
    clear: both; /* /* Clear float for a div which follows four div with class type-4 */
}

演示小提琴

Answer 3

nth-child并且nth-of-type是伪类,只能应用于元素.

.layout:nth-of-type是一个类的伪类,因此不起作用.

Jquery的EQ可能提供解决方案

http://api.jquery.com/eq/