如何使用CSS在垂直导航栏中的联系人下方添加底部边框？

Posted 2023-02-10

我正在学习编码，似乎无法在接触下应用1px的实心边框。

并且，如果我愿意，上面的其他底部边框将变得更粗，就好像它们是双重边框一样。

 #navbar ul 
  list-style-type: none;
  margin: 0px;
  padding: 0px;


#navbar li a 
  display: block;
  width: 60px;
  padding: 16px 32px;
  text-decoration: none;
  text-align: center;
  color: black;
  border: 1px solid black;


#navbar a:hover 
  background-color: black;
  color: white;


#navbar a:last-child 
  border-bottom: none;

<div>
      <ul id="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="models.html">Models</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

答案

您需要在last-child元素上使用li选择器。

#navbar li a 
  display: block;
  width: 60px;
  padding: 16px 32px;
  text-decoration: none;
  text-align: center;
  color: black;
  border: 1px solid black;
  border-bottom: none; /* add this */


#navbar li:last-child a 
  border-bottom: 1px solid black;

请参见:last-child at css-tricks.com以获取更多信息