html - div ID 中的多个无序列表

Question

我有一个问题。我打算在我的页脚中有另一个 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

Answer 1

你的错误在这里

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

你的目标是 .mini-nav ul(没有这样的东西)，也就是它应该是

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