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;
}