如何在CSS中的许多相同标记中间选择一个单独的标记

Question

我在一个"div"标记中有一个"p"标记，还有许多其他的"p"标签。那么，我如何在所有其他标签中间选择一个单独的标签，这样我就可以在CSS中更改它的样式？我对html和CSS非常熟悉，所以，如果这是一个愚蠢的问题，很抱歉。非常感谢。

Answer 1

您可以使用:nth-child。因此<div>内的第二个<p>将是div p:nth-child(2)。

或者像Marc B在评论中说的那样，给它添加一个类

<div>
    <p>Hello, </p><p class='lionel'>is it me you're</p><p> looking for?</p>
</div>

你可以在中找到中间的<p>

div p.lionel {
    font-weight:bold;
}

或者使用:nth-child() 瞄准相同的<p>

div p:nth-child(2){
    font-weight:bold;
}

Answer 2

就我个人而言，我会在元素中添加一个类或id。

如果由于某种原因无法添加任何属性，可以使用：nth子选择器来获取它。类似于div > p:nth-child(5)的东西会获取div > p选择器的第五个匹配项。

根据canius的说法，除了IE7和IE8要求页面处于标准模式外，IE7的所有内容都支持：第n个孩子。

Answer 3

理想情况下，如果您有一组元素，并希望专门更改其中一个元素的样式，则应向其添加class或id。

如果你有这个，并且想瞄准第二个p：

<div>
    <p>...</p>
    <p class="special">...</p>
    <p>...</p>
    <p>...</p>
<div>

你可以通过它的类名来定位它。

.special{
    /* do stuff here */
}

如果由于任何原因无法将自定义类添加到p中，则可以使用：第n个子css选择器，如下所示：

div p:nth-child(2){
    /* do stuff here */
}