Html 如何对类使用 nth-of-type——而不是元素

how to use nth-of-type for classes -- not elements

提问by Hoang Huynh

I am working on a simple HTML for an image gallery. Each row of the gallery can have 2, 3 or 4 images. (In an 2-image row, each image element is named type-2, the same goes to type-3and type-4.)

我正在为图片库编写一个简单的 HTML。图库的每一行可以有 2、3 或 4 张图像。（在一2-图像行，每个图像元素被命名type-2，同样进到type-3和type-4）。

Now I want to select the last element of each row to set a custom margin. My HTML is like this:

现在我想选择每行的最后一个元素来设置自定义边距。我的 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>

I think the following CSS would work but it didn't:

我认为以下 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;}

What this CSS selects is:

这个 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>

I can edit my HTML to achieve what I want, but just out of curiosity, is there some kind of CSS for this?

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

Edit:this question may look like a duplicate of questions asking if nth-childand nth-of-typecan be applied to classes -- not elements. I already knew the answer is no. What I'm really asking for is a pure CSS solution/hack for it, and the chosen answer did just that.

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

采纳答案by Harry

With only CSS hacks, without modifying your markup, you can do something like the below:

仅使用 CSS hacks，无需修改标记，您可以执行以下操作：

[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 */
}

Demo Fiddle

演示小提琴

回答by Brian Campbell

This is not possible to do with CSS Selectors Level 3 (at least, without CSS hacks, extra markup, or JavaScript).

这对于 CSS Selectors Level 3 是不可能的（至少，没有 CSS hacks、额外的标记或 JavaScript）。

The draft CSS Selectors Level 4 proposes the :nth-match()pseudo-class, which would do what you want:

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;}

This is not yet implemented by any browser that I know of, but there is a bug filedto implement it in Chrome.

我所知道的任何浏览器都没有实现这一点，但是在 Chrome 中提交了一个错误来实现它。

回答by Paulie_D

nth-childand nth-of-typeare pseudo classes and can only be applied to elements.

nth-child和nth-of-type是伪类，只能应用于元素。

.layout:nth-of-typeis a pseudo-class of a classand so will not work.

.layout:nth-of-type是类的伪类，因此不起作用。

Jquery's EQ might offer a solution

Jquery 的 EQ 可能会提供解决方案

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

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

回答by hitautodestruct

Short answer

简答

There is no way to do what you're asking in pure css.

没有办法做你在纯 css 中要求的。

Why

为什么

:nth-of-typeCan only be used against an element selector like so:

:nth-of-type只能用于元素选择器，如下所示：

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

Reference link.

参考链接。

Possible JS solution

可能的 JS 解决方案

You can try your luck with some jQuery though:

不过，您可以使用一些 jQuery 试试运气：

var $this;

$('[class^="type-"]').each(function (){

  $this = $(this);

  if ( $this.attr('class') !== $this.next().attr('class') )
    $this.addClass('last');

});

Then use .type-2.lastto access your "last row of type".

然后用于.type-2.last访问您的“最后一行类型”。

Demo

演示

Heres a demo.

Heres a demo.