如何将样式添加到特定的列表元素，即其中的单个元素<li> <nav> ？

Question

我对列表的CSS样式有问题。

这是代码。

.CSS

NAV {
width: 940px;
height: 50px;
float: left;
font-family: Geneva,Arial;
border: 1px solid #000000;
background-color: #D0DBF0;}
NAV ul {
    margin: 0px auto;
    padding-top: 15px;
        padding-left: 70px;
    list-style-type: none;
}
NAV li {
    display: inline;
}
NAV li a {
    float: left;
    text-align: center;
    border-right: 2px solid #00DBF0;
    width: 100px;  
    font-size: 14px; 
    padding: 0px 10px;
    color: #0000FF;
    text-decoration: none;
}

.HTML

<NAV>
        <UL>
            <LI><a href="#">Home</a></LI>
            <LI><a href="#">About Us</a></LI>
            <LI><a href="#">Contact Us</a></LI>
            <LI><a href="#">Red Widgets</a></LI>
            <LI><a href="#">Blue Widgets</a></LI>
            <LI><a href="#">Green Widgets</a></LI>
        </UL>
    </NAV>

所以在这里，我为导航列表设计了所有内容，但对于第一个列表，即家。

<LI><a href="#">Home</a></LI>我想要右边框。请帮助我。

Answer 1

您可以使用

:first-child伪类来执行此操作：

nav li:first-child

或

nav li:first-child a

取决于是要定位列表项 （ <li> ） 还是定位点 （ <a> ）。

Answer 2

你应该添加一个类或 id。

例如（让我们稍后假设您想要一个"当前选定"项目）：

.CSS：

.first a { /* specific style for first item */ }
.current a { /* specific style for current item */}

.HTML：

<NAV>
        <UL>
            <LI class="first"><a href="#">Home</a></LI>
            <LI><a href="#">About Us</a></LI>
            <LI class="current"><a href="#">Contact Us</a></LI>
            ...
            <!-- if the first item happens to be the curent one: -->
            <LI class="first current"><a href="#">Home</a></LI>
        </UL>
</NAV>

JsFiddle here（英语：JsFiddle here