0

这是我试图解决（或简单理解）的问题的 Codepen：http: //codepen.io/jhogue/pen/wtLiD

基本上，我有一组浮动的列。我想用来nth-of-type清除开始新行的列。在这种情况下，每三分之一.column从第四个开始。这就是我理解(3n+4)的工作方式。

我也需要一个标题，这是第一个div元素。尽管我认为这nth-of-type仅适用于我应用它的元素——在这种情况下，是具有类的元素.column——它显然是在计算容器中的第一个元素。

那么，nth-of-type就不能以这种方式工作吗？我对它如何工作的理解不正确吗？

清楚地了解nth-of-type应该做什么，与nth-child：http ://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

4

1 回答 1

0

你只需要变得更有创意。您可能不需要 div 中的标题和段落；但如果你确实需要一个包装器，你可以使用<header>：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div:nth-of-type(3n+4) {
  color: red; 
}

</style>
</head>
<body>

<div class="container">
    <header>
        <h1>Testing nth-of-type.</h1>
        <p>Thought it would skip this div element.</p>
    </header>
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    <div class="column">Column 4. Want this one. </div>
    <div class="column">Column 5</div>
    <div class="column">Column 6</div>
    <div class="column">Column 7. Want this one. </div>
    <div class="column">Column 8</div>
</div>

</body>
</html>
于 2013-07-31T23:20:47.490 回答