2014-05-13 46 views
0

我一直在爲我的個人網站進行新佈局時遇到麻煩。在向我的頁腳添加導航時,我決定在每個鏈接之後添加一個分隔線。除了我想擺脫列表末尾的鏈接分隔符外,但最後一個孩子的CSS選擇器一直沒有工作。雖然我不確定可能導致問題的原因。如果任何人都可以幫助我,將不勝感激。:最後一個孩子選擇器不適合我

這裏是我的html代碼:

<! DOCTYPE> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="../scripts/javascript/responsive_drop_down.js"></script> 
    <link href="../css/main_stylesheet.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="../css/print_stylesheet.css" rel="stylesheet" type="text/css" media="print"/> 
</head> 

<body> 
    <div id="wrapper"> 
     <header> 
      <h1>This is a placeholder <br /> 
       for header</h1> 
     </header> 

     <nav class="nm"> 
      <div class="mobilmenu"></div> 
      <div class="mobile-container"> 
       <ul> 
        <li class="white"><a href="#">Home</a></li> 
        <li class="red"><a href="#">Video</a></li> 
        <li class="purple"><a href="#">Pictures</a></li> 
        <li class="blue"><a href="#">Audio</a></li> 
        <li class="green"><a href="#">Other Work</a></li> 
        <li class="yellow"><a href="#">About Me</a></li> 
        <li class="gray"><a href="#">Contact Me</a></li> 
       </ul> 
      </div>  
     </nav> 

     <div class="sidebar"> 
      <aside> 
       <h3>More Content to come soon.</h3> 
      </aside> 
     </div> 

     <article class="container"> 
      <section> 
       <h1>Heading goes here...</h1> 
       <time datetime="#">Time will go here.</time> 
       <p>Content will go here...</p> 
      </section> 
     </article> 

     <div class="footer-position"> 
      <footer> 
       <span class="copyright">All rights reserved 2014.</span> 

       <nav class="nf"> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Video</a></li> 
         <li><a href="#">Pictures</a></li> 
         <li><a href="#">Audio</a></li> 
         <li><a href="#">Other Work</a></li> 
         <li><a href="#">About Me</a></li> 
         <li><a href="#">Contact Me</a></li> 
        </ul> 
       </nav> 
      </footer> 
     </div>  
    </div> 
</body> 

這裏是我的CSS代碼,以及:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic); 
@font-face 
{ 
    font-family: 'bebas_neueregular'; 
    src: url('../font/BebasNeue/bebasneue-webfont.eot'); 
    src: url('../font/BebasNeue/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../font/BebasNeue/bebasneue-webfont.woff') format('woff'), 
     url('../font/BebasNeue/bebasneue-webfont.ttf') format('truetype'), 
     url('../font/BebasNeue/bebasneue-webfont.svg#bebas_neueregular') format('svg'), 
     url('../font/BebasNeue/BebasNeu.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

body 
{ 
    font-family: 'Ubuntu', sans-serif; 
    width:100%; 
    min-height:auto; 
    margin:0; 
    padding:0; 
    background-color:#84888B; 
} 

#wrapper 
{ 
    width:100%; 
    min-height:auto; 
    margin:0; 
    padding:0; 
} 

header 
{ 
    font-family:'bebas_neueregular', sans-serif; 
    margin:0 auto; 
    background-color:#5D0660; 
    color:#E21208; 
    text-align:center; 
    padding:15px; 
} 

nav 
{ 
    font-family:'bebas_neueregular', sans-serif; 
    text-align:center; 
    margin:0; 
    padding:0; 
} 

nav ul 
{ 
    list-style:none; 
} 

nav ul li 
{ 
    display:inline-block; 
} 

nav ul li a 
{ 
    display:block; 
    text-decoration:none; 
} 

nav.nm 
{ 
    width:100%; 
    background-color:#000000; 
    font-size:135%; 
} 

nav.nm ul 
{ 
    margin-top:0; 
} 

nav.nm ul li a 
{ 
    color:#ffffff; 
    padding:15px 16px; 
} 

nav.nm ul li.white a:hover 
{ 
    background-color:#ffffff; 
    color:#000000; 
    transition:450ms ease; 
    -webkit-transition:450ms ease; 
    -moz-transition:450ms ease; 
} 

nav.nm ul li.red a:hover 
{ 
    background-color:#E21208; 
    color:#000000; 
    transition:450ms ease; 
    -webkit-transition:450ms ease; 
    -moz-transition:450ms ease; 
} 

nav.nm ul li.purple a:hover 
{ 
    background-color:#9E00A3; 
    color:#000000; 
    transition:450ms ease; 
    -webkit-transition:450ms ease; 
    -moz-transition:450ms ease; 
} 

nav.nm ul li.blue a:hover 
{ 
    background-color:#1A297F; 
    color:#000000; 
    transition:450ms ease; 
    -webkit-transition:450ms ease; 
    -moz-transition:450ms ease; 
} 

nav.nm ul li.green a:hover 
{ 
    background-color:#319032; 
    color:#000000; 
    transition:450ms ease; 
    -webkit-transition:450ms ease; 
    -moz-transition:450ms ease; 
} 

nav.nm ul li.yellow a:hover 
{ 
    background-color:#E1E13D; 
    color:#000000; 
    transition:450ms ease; 
    -webkit-transition:450ms ease; 
    -moz-transition:450ms ease; 
} 

nav.nm ul li.gray a:hover 
{ 
    background-color:#84888B; 
    color:#000000; 
    transition:450ms ease; 
    -webkit-transition:450ms ease; 
    -moz-transition:450ms ease; 
} 

nav.nf 
{ 
    font-size:85%; 
} 

nav.nf ul li:last-child 
{ 
    border-right:none; 
} 

nav.nf ul li a 
{ 
    color:#000000; 
    padding:2px 6px; 
    border-right:1px solid #000000; 
} 

nav.nf ul li a:hover 
{ 
    color:#ffffff; 
} 

回答

2

li:last-child選擇指li元素,而不是它的a元素。由於li元素本身沒有右邊框可以覆蓋,所以該規則集不起作用。

你需要確保你選擇li:last-childa由於右側邊框宣佈a在以下規則集:

nav.nf ul li:last-child a 
{ 
border-right:none; 
} 

另外,你的DOCTYPE似乎是畸形的;它應該是<!DOCTYPE html>。在!之後不能有空格,並且html標識符必須在那裏。

在不相關的說明中,值得指出的是,您不必在每個nav.nm ul li<class> a:hover規則中聲明相同的轉換。您可以在一般的nav.nm ul li a規則中聲明它,並且當任何鏈接懸停時,轉換將生效。前綴爲transition的前綴:

nav.nm ul li a 
{ 
color:#ffffff; 
padding:15px 16px; 
-webkit-transition:450ms ease; 
-moz-transition:450ms ease; 
transition:450ms ease; 
} 

nav.nm ul li.white a:hover 
{ 
background-color:#ffffff; 
color:#000000; 
} 

nav.nm ul li.red a:hover 
{ 
/* ... */ 
}