Question

的CSS

.sidebar .nav li:nth-child(1) a {
 color: #fff;
 font-size: 24px;
 border: none;
 background: #27AE60;
}

Html

<li><a href="#">Dashboard</a></li>
 <li id="accordian">
 <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">New Registration</a>
 <ul id="collapseOne" class="nav nav-pills nav-stacked collapse">
  <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Resource</a></li>
  <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Client</a></li>
 </ul>
</li>

我想设计父亲ul的第一个li而不是孩子li

Answer 1

我认为.nav class已分配给ul，class直接嵌套在.sidebar .sidebar > ul.nav > li:first-child a { color: red; }的元素下，因此请在此处使用直接子选择器

.sidebar > ul.nav > li:first-child > a

Demo

注意：最好使用li代替以上是更具体的

如果你的意思是每个直接ul嵌套在第一级父:first-child下，而不仅仅是摆脱.sidebar > ul.nav > li > a { color: red; }伪

{{1}}

Demo 2

Answer 2

从你的代码.nav li:nth-child(1)看起来你真正想要的是设置第一个li的锚点，但不是它的相邻兄弟。

（虽然你说

我想设计父亲ul的第一个li而不是孩子li

......我想你的意思是说邻近的兄弟姐妹）

所以实际上你的标记看起来像这样：

<ul>
    <li><a href="#">Dashboard</a>
    </li>
    <li id="accordian"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">New Registration</a>

        <ul id="collapseOne" class="nav nav-pills nav-stacked collapse">
            <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Resource</a>
            </li>
            <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Client</a>
            </li>
        </ul>
    </li>
</ul>

..然后你发布的css代码实际上有效。

<强> FIDDLE

css元素设计不包括内部元素

2 个答案: