Question

我有这样的HTML结构：

<section id="main-content" class="photo-grid">
    <h2>Photos</h2>

    <div class="col-1-4">
            <a href="#">
                <p>File 503</p>
                <img src="#" />
            </a>
    </div>

    <div class="col-1-4">
            <a href="#">
                <p>File 508</p>
                <img src="#" />
            </a>
    </div>

    <div class="col-1-4">
            <a href="#">
                <p>File 505</p>
                <img src="#" />
            </a>
    </div>

    <div class="col-1-4">
            <a href="#">
                <p>File 525</p>
                <img src="#" />
            </a>
    </div>

    <br clear="all" />
</section>

我想为不同的.col-1-4元素设置不同的CSS属性。如何使用：nth-child（）？

选择它们

我已尝试#main-content:nth-child(n)和.photo-grid:nth-child(n)，但这似乎无效。

Answer 1

你应该使用nth-of-type而不是nth-child，这实际上是说'选择指定元素的第n个子元素'与'选择第n种类型的元素，它是指定元素的子元素'：

#main-content div:nth-of-type(1)

Demo Fiddle

其中1是有问题的div的数字（索引从1开始）

您应该将nth-of-type应用于所定位的特定元素类型，您甚至可以将上述内容重点放在：

.col-1-4:nth-of-type(n)

More on nth-child from MDN

这可以用这种方式更清楚地描述：匹配元素是所有孩子被分裂后的元素的第b个孩子分成一组元素。

More on nth-of-type from MDN

：nth-of-type CSS伪类匹配具有+ b-1的元素在文档树中具有相同元素名称的兄弟姐妹，对于n的给定正值或零值，并且具有父元素。请参阅：nth-child以获得更全面的语法描述论点。如果你这是一个更灵活和有用的伪选择器想要确保无论在哪里都选择相同类型的标签它位于父元素内部，或者显示其他不同的标记在它之前。

Answer 2

此代码#main-content:nth-child(n) and .photo-grid:nth-child(n)无效，因为您正在选择ID为main-content或class photo-grid的n-childs。你必须将你想要使用nth-child的div中的元素作为目标，例如：

#main-content div:nth-child(n) or .photo-grid div:nth-child(n)

Answer 3

你也可以简单地使用它，这很容易做到：

:nth-child(number)
{
css declarations;
}

根据您的要求，n可以是任何数字

如何用nth-child（）选择一个div？

3 个答案:

Demo Fiddle