2014-05-13 44 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 
{ 
/* ... */ 
}