css3如何计算：nth-​​of-type项目？

Question

我在使用:nth-of-type(3n+3)清算边距时遇到问题。如果我使用任何div或任何东西，它会扰乱项目的计数。关于为什么会发生这种情况以及我可以做些什么来解决它的任何想法？

http://jsfiddle.net/Y7G4e/

CSS

.clear{
    clear: both;
    /* overflow acts the same as clear */
    /* overflow: hidden; */
    width: 100%;
    background-color: blue;
}
div.row{
    width: 700px;
    background-color: #000;
    overflow: hidden;
}
div.one-of-three{
    width:200px;
    float: left;
    margin-right:50px;
    background-color: #ff0000;
}
.one-of-three:nth-of-type(3n+3){
    margin-right: 0;
}

HTML

<div class="row">
<div class="one-of-three">one-of-three</div>
<div class="one-of-three">one-of-three</div>
<div class="one-of-three">one-of-three</div>

<div class="clear">div divider</div>
<!-- <div>blank div does the same thing - just not as visible for debugging</div> -->

<div class="one-of-three">one-of-three</div>
<div class="one-of-three">one-of-three</div>
<div class="one-of-three">one-of-three</div>
</div>

Answer 1

:nth-of-type伪类适用于 类型 元素 - 而不是类。由于所有元素都是div，因此它们之间没有区别，因为这些类被忽略了。一种可能的解决方法是将.clear元素从div更改为span。

<span class="clear">rogue div divider</span>

Example Here

.clear{
    display:block;
    clear: both;
    background-color: blue;
}

只需将元素的显示更改为block，以使其表现为div元素。