Fatal编程技术网
  • css/
  • Css 类型为n的问题。我一定是误解了它的工作原理

Css 类型为n的问题。我一定是误解了它的工作原理

css

Css 类型为n的问题。我一定是误解了它的工作原理,css,css-selectors,Css,Css Selectors,以下是我试图解决（或简单理解）的问题的代码笔： 基本上，我有一组浮动的列。我想使用nth of type清除开始新行的列。在这种情况下，从第四个开始，每隔三个.column。这就是我对工作的理解 我还需要一个标题，这是第一个div元素。尽管我认为类型的第n个n将只应用于我应用它的元素——在本例中，是类为.column的元素——但它显然是在计算容器中的第一个元素 那么，n类型的就不是这样工作的吗？我对其工作原理的理解是否不正确 清楚地了解第n个类型的孩子与第n个孩子应该做什么：你只需要更具创造性。

以下是我试图解决（或简单理解）的问题的代码笔：

基本上，我有一组浮动的列。我想使用
nth of type
清除开始新行的列。在这种情况下，从第四个开始，每隔三个
.column
。这就是我对工作的理解

我还需要一个标题，这是第一个
div
元素。尽管我认为类型的第n个
n将只应用于我应用它的元素——在本例中，是类为
.column
的元素——但它显然是在计算容器中的第一个元素

那么，
n类型的
就不是这样工作的吗？我对其工作原理的理解是否不正确


清楚地了解第n个类型的孩子与第n个孩子应该做什么：
你只需要更具创造性。您可能不需要div中的标题和段落；但如果您确实需要包装器，您可以使用
：


<!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>




分区：第n个类型（3n+4）{
颜色：红色；
}
测试第n个类型。
我想它会跳过这个div元素

第1栏
第2栏
第3栏
第4栏。我想要这个。
第5栏
第6栏
第7栏。我想要这个。
第8栏

不能基于类执行第n个类型。是的。元素类型，而不是类值。Argh。。。太糟糕了。伙计，这真是令人失望。可能的重复，但在这种情况下，你是否有
将无关紧要-第n个
.column
仍然是
.container
中的第n个
div
，因为
h1
和
p
不是
div
。是的，这就是重点。OP有一个
div
来代替
标题
，但不希望将第一个
div
包含在计数中，但它被包含在计数中，因为
nth类型
将它们全部计数。因此，我们的想法是将第一个div更改为不同的元素，这样它就不会包含在类型的第n个
计数中。这样，正确的div就会被涂成红色。