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>

到第一个li，但它没有做任何事情，在开发人员工具中，它旁边有一个橙色三角形。那么，我将如何完成手头的任务呢？谢谢你的帮助。

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：

：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>

尝试从a元素中删除左边框样式

3 个答案: