div ID中的多个无序列表

时间:2014-02-14 22:13:36

标签: html css css-selectors

我遇到了问题。我打算在我的页脚中有另一个UL列表,但我想使用css:before为第二个导航分配不同的符号。

但是,如果我删除.mini-nav正确应用样式,我将无法使用以下代码。

#footer {
    margin: 25px 0 25px 0;
    text-align: center;
    color: #8F8F8B; 
    font-size: 0.8em;
    text-align: center;
}

#footer a {
    text-decoration: none;
    color: #CCDDDD;
}

#footer a:hover {
    border-bottom: 2px solid #FFFFFF;
    padding-bottom: 3px;
    color: #FFFFFF;
}

#footer .mini-nav ul li {
    display: inline;
}

#footer .mini-nav ul li+li:before {
    content: ' | ';
    margin: 10px;
}

<div id="footer" class="sixteen columns">
    <ul class="mini-nav">
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Studio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div

1 个答案:

答案 0 :(得分:1)

你的错误就在这里

#footer .mini-nav ul li+li:before 

你定位.mini-nav ul(并且没有这样的东西),a.k.a它应该是

#footer ul.mini-nav li+li:before