HTML/CSS |從嵌套列表刪除邊框

Question

我搜索了所有的StackOverflow，但無法找到這個答案。

我怎樣才能得到border-right隻影響主要<li> S（即： 「邊境在這裏 - >」），但不能嵌套<li> S（即： 「無邊界 - >」）？

代碼：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    overflow: hidden; 
 
} 
 
div, 
 
nav { 
 
    display: block; 
 
} 
 
.main-header { 
 
    border-bottom: 1px solid rgb(213, 213, 213); 
 
} 
 
.block { 
 
    width: 840px; 
 
    position: relative; 
 
    display: block; 
 
    margin: auto; 
 
} 
 
.main-header ul.nav { 
 
    margin: auto; 
 
    text-align: center; 
 
    padding: 0 0 0 0; 
 
    position: relative; 
 
    color: #333; 
 
    font-weight: bold; 
 
    font-size: 10px; 
 
    display: block; 
 
    height: 45px; 
 
} 
 
#nav { 
 
    z-index: 200; 
 
    position: relative; 
 
    overflow: visible; 
 
} 
 
.container { 
 
    max-width: 940px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position: relative; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
    width: 1px; 
 
} 
 
.container:after { 
 
    clear: both; 
 
} 
 
.main-header .nav-outer { 
 
    padding: 0; 
 
    position: static; 
 
} 
 
.main-header nav > div > ul > li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    margin: 0px; 
 
    line-height: 45px; 
 
    border-right: 1px solid #993030; 
 
} 
 
.main-header nav > div > ul > li > ul { 
 
    position: relative; 
 
    padding: 0; 
 
    width: inherit; 
 
    background-color: beige; 
 
} 
 
.main-header .nav > li > ul > li { 
 
    display: block; 
 
} 
 
.nav li:hover { 
 
    background: #000; 
 
    text-decoration-color: #fff; 
 
    cursor: pointer; 
 
} 
 
.nav li:hover a { 
 
    color: #fff; 
 
} 
 
.nav a { 
 
    text-decoration: none; 
 
    color: #333; 
 
    display: block; 
 
    padding: 0 2.083333333333vw; 
 
} 
 
.nav-home { 
 
    border-left: 1px solid rgb(213, 213, 213); 
 
} 
 
ul.nav li.nav-home a { 
 
    background: url(Images/nav-sprite.png) no-repeat center 14px; 
 
    text-indent: 200%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    display: block; 
 
    width: 20px; 
 
} 
 
ul.nav li.nav-home a:active { 
 
    text-decoration: none; 
 
    outline: 0; 
 
    color: #333; 
 
} 
 
ul.nav li.nav-home a:active { 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    color: #333; 
 
    line-height: 45px; 
 
}

<div class="main-header"> 
 
    <div class="container nav-outer"> 
 
    <nav id="nav"> 
 
     <div class="block"> 
 
     <ul class="nav"> 
 
      <li class="nav-home"><a href="/homepage.html">Home</a> 
 

 
      </li> 
 
      <li><a href="#">Border here -></a> 
 

 
      <ul> 
 
       <li>No border -></li> 
 
       <li>No border -></li> 
 
       <li>No border -></li> 
 
       <li>No border -></li> 
 
       <li>No border -></li> 
 
       <li>No border -></li> 
 
       <li>No border -></li> 
 
       <li>No border -></li> 
 
       <li>No border -></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Border here -></a> 
 

 
      </li> 
 
      <li><a href="#">Border here -></a> 
 

 
      </li> 
 
      <li><a href="#">Border here -></a> 
 

 
      </li> 
 
      <li><a href="#">Border here -></a> 
 

 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div>

一個新手在這裏！如果代碼沒有正確組織，請不要毆打我。

Answer 1

在css中的>字符將使您的選擇器僅指定直接後代。您想要定位nav類別的即時後代li元素。我已經編輯了下面的css。

body { 
    margin: 0; 
    padding: 0; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    overflow: hidden; 
} 
div, 
nav { 
    display: block; 
} 
.main-header { 
    border-bottom: 1px solid rgb(213, 213, 213); 
} 
.block { 
    width: 840px; 
    position: relative; 
    display: block; 
    margin: auto; 
} 
.main-header ul.nav { 
    margin: auto; 
    text-align: center; 
    padding: 0 0 0 0; 
    position: relative; 
    color: #333; 
    font-weight: bold; 
    font-size: 10px; 
    display: block; 
    height: 45px; 
} 
#nav { 
    z-index: 200; 
    position: relative; 
    overflow: visible; 
} 
.container { 
    max-width: 940px; 
    padding-left: 20px; 
    padding-right: 20px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 
.container:before, 
.container:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
    width: 1px; 
} 
.container:after { 
    clear: both; 
} 
.main-header .nav-outer { 
    padding: 0; 
    position: static; 
} 
.main-header nav > div > ul > li { 
    vertical-align: top; 
    display: inline-block; 
    margin: 0px; 
    line-height: 45px; 
} 
.main-header .nav > li > a { 
    border-right: 1px solid #993030; 
} 
.main-header nav > div > ul > li > ul { 
    position: relative; 
    padding: 0; 
    width: inherit; 
    background-color: beige; 
} 
.main-header .nav > li > ul > li { 
    display: block; 
} 
.nav li:hover { 
    background: #000; 
    text-decoration-color: #fff; 
    cursor: pointer; 
} 
.nav li:hover a { 
    color: #fff; 
} 
.nav a { 
    text-decoration: none; 
    color: #333; 
    display: block; 
    padding: 0 2.083333333333vw; 
} 
.nav-home { 
    border-left: 1px solid rgb(213, 213, 213); 
} 
ul.nav li.nav-home a { 
    background: url(Images/nav-sprite.png) no-repeat center 14px; 
    text-indent: 200%; 
    white-space: nowrap; 
    overflow: hidden; 
    display: block; 
    width: 20px; 
} 
ul.nav li.nav-home a:active { 
    text-decoration: none; 
    outline: 0; 
    color: #333; 
} 
ul.nav li.nav-home a:active { 
    text-decoration: none; 
    font-size: 16px; 
    color: #333; 
    line-height: 45px; 
}