3

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

http://jsfiddle.net/fX9Gy/

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

4

7 回答 7

5

给你的父母上课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/

于 2012-08-24T10:51:18.853 回答
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}
于 2012-08-24T10:32:04.777 回答
1

要么使选择器更具体：

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/

于 2012-08-24T10:34:21.970 回答
0

嗨，请查看更新的 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/

于 2012-08-24T10:40:42.650 回答
0

你可以试试这个。

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

这也适用于浏览器到 ie 7

于 2012-08-24T10:52:11.190 回答
0

如果您不想添加 class 或 id 的东西，那么您必须使用 jquery。但是您需要为 ul 添加类名。

但是如果没有 jquery，使用 CSS 你需要在 li 中为 ul 添加一行，

ul li ul li:first-child{ background-color:white; }
于 2012-08-24T11:09:15.490 回答
-1

更新了小提琴。向父级添加了一个类ul

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

于 2012-08-24T10:33:42.423 回答