Question

我在为个人网站制作新版面时遇到了麻烦。在向页脚添加导航时，我决定在每个链接后添加一个分隔符。除了我想在我的列表末尾摆脱链接的分隔符;但是最后一个孩子的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;
}

Answer 1

您的li:last-child选择器引用li元素，而不是a元素。由于li元素本身没有要覆盖的右边框，因此该规则集无效。

您需要确保在a中选择了li:last-child，因为您在以下规则集中的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
{
/* ... */
}

：最后一个孩子选择器不适合我

1 个答案: