CSS - 用class定位第一个元素

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
}

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