1

我在让我的 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/

4

5 回答 5

8

当元素是某个元素的子元素时,子选择器匹配。子选择器由两个或多个以 . 分隔的选择器组成>

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

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

演示

于 2013-08-02T15:01:29.290 回答
1

这项工作演示

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

">" 的意思是:选择那些直接是孩子的

于 2013-08-02T15:00:32.757 回答
0

我认为在所有父链接上放置一个类很好。特别是您在后端使用一些循环来生成 html,然后为每个循环添加一个类很简单。

于 2013-08-02T15:01:31.583 回答
0

如果您试图让样式.sidebar .nav li a仅应用于嵌套列表中的链接,而不是嵌套列表中的链接,则可以将选择器更改为如下所示.sidebar .nav > li > a:这仅针对<a>标记的直接后代<li>标记,并且仅针对顶级列表中的标记。不会再深了。

于 2013-08-02T15:01:49.180 回答
0

尝试这个:

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

希望这可以帮助

于 2013-08-02T15:04:49.740 回答