Question

我只需要第一个带有灰色背景颜色的'li'元素。但是每个'ul li'的第一个'li'我的背景颜色灰色正在应用。背景颜色应仅适用于第一个li（我的示例）。

任何人都可以解决问题。感谢

Answer 1

将类提供给您的父UL。写得像这样：

<强> HTML

<ul class="parent">
    <li>one</li>
    <li>one
        <ul>
            <li>two</li>
            <li>two</li>
            <li>two</li>
        </ul>    
    </li>
    <li>one</li>
</ul>

<强> CSS

.parent > li:first-child{background-color:#ccc}

选中此项以获取更多http://jsfiddle.net/fX9Gy/27/

Answer 2

在你的css结尾添加：

ul li ul li:first-child{background-color:transparent}

或者给元素一个id：

<li id="first">one</li>

#first {background-color:#ccc}

** 编辑 **

你可以尝试这个css：

ul li{color:red}
ul li > ul li{color:blue}
li {background-color:#ccc} 
ul ul li {background-color:transparent}
li + li {background-color:transparent}

Answer 3

使选择器更具体：

ul li ul li:first-child{background-color:transparent}

或者向UL添加一个类并在那里选择第一个孩子：

ul.nested li:first-child{background-color: #fff;}

... <li>one
        <ul class="nested">
            <li>two</li>
...

http://jsfiddle.net/Kyle_Sevenoaks/fX9Gy/15/

Answer 4

嗨，请参阅更新的CSS，我希望这将有效

ul li{color:red}

ul li > ul li{color:blue}

ul li:first-child{background-color:#ccc}
ul li ul li:first-child {background:none;}

http://jsfiddle.net/fX9Gy/23/

Answer 5

你可以试试这个。

li {color:gray}
ul ul li {color:red}
li + li {color:red}

这将适用于低至ie 7的浏览器

Answer 6

如果你不想添加class或id，那么你必须使用jquery。但是你需要为ul。

添加类名

但没有jquery，使用CSS你需要为ul里面添加一行，这是li，

ul li ul li:first-child{ background-color:white; }

Answer 7

更新了小提琴。向父ul

添加了一个类

http://jsfiddle.net/fX9Gy/26/

背景应仅适用于第一胎李而不适用于其他原则

7 个答案: