CSS - 以类为目标的第一个元素答案

【问题标题】：CSS - target the first element with classCSS - 以类为目标的第一个元素
【发布时间】：2013-05-22 00:02:42
【问题描述】：

HTML：

<p class=menu_top>Title</p>
<p class=menu_top>Order</p>
<p class=menu_top>Position</p>
<p class=menu_top>Number</p>

如何只定位第一个元素？

【问题讨论】：

【解决方案1】：

使用:first-child 伪类。

.menu_top:first-child {
    your: rules;
}

【讨论】：

【解决方案2】：

请注意，您的结构方式也将导致您在未来开展更多工作。最好有这样的东西：

<div class="menu_top">
    <p>Title</p>
    <p>Order</p>
    <p>Position</p>
    <p>Number</p>
</div>

（在语义上更正确的是使其成为无序列表）当您可以像这样简单地在 CSS 中指定时，重复是不必要的：

.menu_top p {
    //all my basic styles for each menu item
}

.menu_top p:first-child {
    // specific styles for just the first menu item
}

过度分类会导致将来大量返工，并使代码混乱。利用级联对您有利；它减少了重复代码，并且更容易只覆盖异常值。

【讨论】：