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

Question

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>

我怎样才能只定位第一个元素？

Answer 1

使用:first-child伪类。

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

http://jsfiddle.net/uKJcK/1/

Answer 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
}

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