尝试从一个元素

Question

移除左边框样式我有一个导航栏是像这样：

<ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="gallery.html">Gallery</a></li> 
     <li><a href="testimonial.html">Testimonials</a></li> 
     <li><a href="service.html">Services</a></li> 
     <li><a href="contact.html">Contact</a></li> 
</ul> 

而且它有CSS像这样：

.nav_bar { 
    margin: 0px 0px 0px 0px; 
    height:40px; 
} 
.nav_bar ul { 
    margin:0px; 
    padding:0; 
    list-style:none; 
    width:940px; 
} 
.nav_bar li { 
    margin: 0px 0px 0px 0px; 
    display:inline; 
} 
.nav_bar li a { 
    text-align:center; 
    border-left: 1px solid #fff; 
    text-decoration:none; 
    padding: 20px; 
    width:147px; 
    background:#000000; 
    color:#eee; 
    float:left; 
} 

你可以想像，这会在元素的左侧放置一条白线，除了第一个元素外，这些元素都是我想要的。我尝试添加：

<a href="index.html" style="border-left:1px solid color:#000000">Home</a> 

到第一李，但它没有做任何事情，并在开发工具，它划掉一个橙色三角旁边。那么，我将如何完成手头的任务？ 感谢您的帮助。

Answer 1

您的border-left语法略有误差，它应该是：

<a href="index.html" style="border-left:1px solid #000000">Home</a> 

对排序语法，你应该使用的更多信息请参阅本introduction to CSS shorthands。

Answer 2

为什么不 .nav_bar li a:first-child { border-left: 1px solid #000; }

或者，如果你不希望它在所有 .nav_bar li a:first-child { border:none; }

Answer 3

从http://www.w3.org/TR/CSS2/selector.html#first-child：

的：第一个孩子伪类的元素相匹配是其他元素的第一个子元素。

在下面的示例中，选择器匹配DIV元素的第一个子元素的任何P元素。该规则抑制缩进一个DIV的第一款：

div > p:first-child { text-indent: 0 } 

此选择将匹配下面的代码片段的DIV内与p：

<P> The last P before the note. 
<DIV class="note"> 
<P> The first P inside the note. 
</DIV> 

，但不会在符合下列第二P-片段：

<P> The last P before the note. 
<DIV class="note"> 
<H2>Note</H2> 
<P> The first P inside the note. 
</DIV>