Question

以下是我要解决（或简单理解）问题的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/

Answer 1

你只需要更有创意。您可能不需要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>

与nth-of-type的问题。我一定是在误解它是如何运作的

1 个答案: