删除 CSS 中的边框

Question

我想删除 "what's new" 和 "meal ideas" 之后的多余边框，我尝试选择 <ul> 中的第一个 child 而不是 [=14] =] 而且它甚至没有用。

html { 
  background-color: white ; 
}
body {
  background-color: white ;
  margin: 0 auto;
  width: 960px; 
  font-family: arial,helvetica,sans-serif;
}
a { 
  text-decoration: none;
  color: #373535 ;
}
header {
  background-color: #ede6e6;
  height:150px;
  padding-top: 20px;
}
ul {
  padding: 0 ;
}
li{
  display: inline;
  padding: 10px;
  font-size: 16px;
}
header li :first-child {
  border-right: 1px solid #373535;
  padding-right: 10px;
}

<!DOCTYPE html>
<html lang= "en" >
  <head>
    <title> My Recipe </title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="js/html5shiv.js"></script>
    <!-- yolo this is my first project -->
  </head>
  <body>
    <header>
      <div class="Left">
        <ul>
          <li> <a href="">Popular recipes</a> </li>
          <li><a href="">Whats New</a> </li>
        </ul> 
      </div>
      <div class="Right">
        <ul>
          <li> <a href="">Categories</a> </li>
          <li><a href="">Meal Ideas</a> </li>
        </ul> 
      </div>
      <div id="logo">
        <img src="images/chefs-hat.png"/>
        <p>My recipes</p>
      </div>
    </header>
  </body>
</html>

Answer 1

使用这个：

.Left ul li:last-child a,.Right ul li:last-child a {
  border: none;

  }

html { 
 background-color: white ; 
 }
 
  body {
  background-color: white ;
  margin: 0 auto;
  width: 960px; 
  font-family: arial,helvetica,sans-serif;
  
 }

 a { 
   text-decoration: none;
   color: #373535 ;
 
 }

header {
 background-color: #ede6e6;
 height:150px;
 padding-top: 20px;
}

ul {
 padding: 0 ;
}

li{
 display: inline;
 padding: 10px;
 font-size: 16px;
}
 header li :first-child {
     border-right: 1px solid #373535;
     padding-right: 10px;

   }

.Left ul li:last-child a,.Right ul li:last-child a {
  border: none;
  
  }

<!DOCTYPE <!DOCTYPE html>
<html lang= "en" >
<head>
 <title> My Recipe </title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>

<body>
    <header>
     <div class="Left">
        <ul>
          <li> <a href="">Popular recipes</a> </li>
          <li><a href="">Whats New</a> </li>
        </ul> 
     </div>

     <div class="Right">
      <ul>
          <li> <a href="">Categories</a> </li>
          <li><a href="">Meal Ideas</a> </li>
      </ul> 
     </div>

     <div id="logo">
        <img src="images/chefs-hat.png"/>
        <p>My recipes</p>
     </div>
 </header>


</body>


</html>

Answer 2

给你： CSS:

body {
background-color: white ;
margin: 0 auto;
width: 960px; 
font-family: arial,helvetica,sans-serif; 
}
a { 
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px; 
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 5px;
margin: 5px;
font-size: 16px;
}
ul li:first-child {
border-right: 1px solid #373535;
padding-right: 10px;
width: 9%;

}

删除 CSS 中的边框

Removing a border in CSS

html

css

css-selectors

pseudo-element