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 Specifications - Selectors, 5.6 Child selectors

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

Demo

Answer 2

这项工作DEMO：

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

“＆gt;”意思是：选择那些直接孩子

Answer 3

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

Answer 4

如果您尝试仅将样式应用于.sidebar .nav li a，而不是嵌套列表中的链接，则可以将选择器更改为如下所示：.sidebar .nav > li > a。这会定位<a>标记，这些标记只是<li>标记的直接后代，而只是那些位于顶级列表中的标记。它不会再深入了。

Answer 5

试试这个：

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

希望这会有所帮助

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

5 个答案: