有li：nth-​​child效果只有父列表而不是子列表

Question

我能够达到我想要的效果，但想知道是否有更好的编码方式。我正在使用li:nth-child()来选择我要添加边框的父列表的部分。

但我不希望这些影响父列表中的子列表。

HTML

<ul class="nav">
<li>Link 1

    <ul>
        <li>Sub Link 1</li>
    </ul>
</li>
</ul>

CSS

.nav li:nth-child(-n+3) {
    border-left: 4px solid #FFC50A;
}

如何获得＆＃34; Sub Link 1＆＃34;没有使用边框没有边框：

.nav > li > ul > li {
    border: 0px !important;   
}

我是否应该只为父列表提供一个类来使列表具有边框而不是使用.nav li:nth-child(-n+3)？

See Fiddle

Answer 1

正如我在评论中指出的那样，您可以使用 child selector ，以防止选择器处理内部列表项，如下所示：

.nav > li:nth-child(-n+3) {
    border-left: 4px solid #FFC50A;
}

<强> EXAMPLE HERE

  

<强> 5.6 Child selectors
  当元素是某个元素的子元素时，子选择器匹配。   子选择器由两个或多个由>分隔的选择器组成。

Answer 2

不幸的是，由于CSS的级联性质，我不认为这是明确可能的（yet）。

我认为如果我实现这个，我可以为每个列表定义父类和子类。这有助于提高特异性，但如果生成HTML而不是手工编码，则可能会遇到问题。

编辑：

我刚想到的另一件事是（取决于你在这里的可扩展性需求），你可以尝试用你的改写样式设置孩子，如：

fiddle

    <li>Link 1
        <ul>
            <li class="childList">Sub Link 1</li>
        </ul>
    </li>

和

.childList {
position: relative;
width: 175px;
padding: 0;
display: inline-block;
margin-right: 20px;
color: #555;
border: 0px !important;

}

。我不确定这个列表是如何平衡的，可以这么说，所以这也可能是一个糟糕的答案。