CSS选择器仅将样式应用于父链接

Question

我在让CSS选择器只选择父链接时遇到了一些问题.

<style>
.sidebar .nav li a {
    background-color: transparent;
    border-right: 1px solid #563D7C;
    color: #563D7C;
    font-weight: bold;
}
</style>

<div class="sidebar">
<ul class="nav sidenav">
    <li>
        <a href="#">Menu1</a>
        <ul class="nav">
            <li><a href="#">Item1</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu2</a>
        <ul class="nav">
            <li><a href="#">Item1</a></li>
        </ul>
    </li>
</ul>

不幸的是..应用于导航中所有链接的样式,我的选择是在我想要设置的所有链接上放置一个类,而不是必须这样做.

http://jsfiddle.net/bFxm4/

Answer 1

一个孩子选择当一个元素是一些元素的子匹配.子选择器由两个或多个分隔的选择器组成>.

CSS 2.0规范 - 选择器,5.6子选择器

.sidebar .nav > li > a {
    background-color: transparent;
    border-right: 1px solid #563D7C;
    color: #563D7C;
    font-weight: bold;
}

演示