如何将样式添加到特定列表元素，即在中单个？

I have a problem regarding CSS styling for my list.

关于我的列表的CSS样式我有一个问题。

Here is the code.

这是代码。

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>

So here i have designed everything for navigation list, but for the first list i.e home.

所以这里我设计了导航列表的所有内容,但是第一个列表就是家。

<LI><a href="#">Home</a></LI> i want right border. please help me.

主页我想要正确的边框。请帮帮我。

2 个解决方案

#1

You can do it using the :first-child pseudo-class:

你可以使用:first-child伪类:

nav li:first-child

nav li:first-child a

depending on whether you want to target the list item (<li>) or anchor (<a>).

取决于您是否要定位列表项(

)或锚点()。

#2

You should add a class, or id.

您应该添加一个类或id。

For example (Let's also assume later you want a "current selected" item):

例如(我们稍后假设你想要一个“当前选中的”项目):

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

#1