带有无序列表的CSS第一子类伪类（Bootstrap） [英] CSS first-child pseudo class with unordered list (Bootstrap)

问题描述

HTML结构如下

$

b
$ b

 < div class =nav-collapse> 
< ul class =nav> 
< li>< a href =＃>测试1< / a>< / li> 
< li>< a href =＃>测试2< / a>< / li> 
< li>< a href =＃>测试3< / a>< / li> 
< / ul> 
< / div> 
  

并应用我做的第一个子元素的背景颜色

  .nav-collapse> .nav：first-child {
 background-color：orange; 
} 
  

它为所有列表项呈现橙色背景。
我玩过轻微的变化，但它没有什么区别。

  .nav-collapse> ul.nav：first-child 
 .nav-collapse> ul：first-child 
  

这里是演示

解决方案

  .nav> li：first-child {
 background-color：orange; 
} 
  

在此工作jsFiddle

您尝试为第一个 .nav item - 只有一个。只需将其更改为样式 li ，即 .nav 的直接子级。

如果你想更具体地使用：

  .nav-collapse> .nav> li：first-child {
 background-color：orange; 
} 
  

I am trying to render a background color on the list item that is the first child of the unordered list.

HTML structure is as follows

<div class="nav-collapse">
    <ul class="nav">
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
    </ul>
</div> 

and to apply the background color on the first child element I did

.nav-collapse > .nav:first-child {
    background-color: orange;
}

It renders orange background to all list items. I've played with slight variations but it doesn't make difference.

.nav-collapse > ul.nav:first-child
.nav-collapse > ul:first-child

Here is the Demo

解决方案

Use the following:

.nav > li:first-child {
    background-color: orange;
}

Working jsFiddle here

You were trying to style the first .nav item - which there is only one of. Simply change it to style the first li that is a direct child of .nav.

If you want to be more specific use:

.nav-collapse > .nav > li:first-child {
    background-color: orange;
}

这篇关于带有无序列表的CSS第一子类伪类（Bootstrap）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！