將背景顏色應用於li而不是嵌套

我嵌套了ul/li，問題是如果您向頂部li添加背景顏色，因爲其中嵌套項目，整個列表似乎都具有此背景顏色而不僅僅是頂部李（我認爲這是因爲它延長頂部李的高度）。將背景顏色應用於li而不是嵌套

是否有可能只將背景顏色應用到頂部li？

我希望這是有道理的！

2010-07-05 fire

你說的頂部li，但我認爲你的意思是根li，其中也包含li元素的子元素。在這種情況下，可以設置的背景顏色如下：

.myroot>ul>li { background-color: Yellow }

注：上面的示例需要與類名「myroot」一個包裝元件（通常是DIV）。

有關CSS子選擇器的更多信息，請參閱this article。

來源

2010-07-05 14:20:23 Prutswonder

好，你可以隨時給孩子李的不同的背景顏色。

來源

2010-07-05 13:59:16

使用jQuery，並給予特殊類第一李

`$("ul li:first")`.addClass('special_bg')

=只能得到的< -ul->

來源

2010-07-05 14:00:30

第一< -li->元素，這取決於你的CSS。您可以定義一個頂級li類並使用它來設置背景顏色。

來源

2010-07-05 14:00:36

孩子總是繼承父母的屬性;這就是爲什麼它被稱爲級聯樣式表。

我建議給所有的li元素一個默認的背景顏色，併爲頂層元素（例如一個特殊的類）覆蓋它。

來源

2010-07-05 14:01:19

我的理解是你有一個帶有LI的UL（我們稱之爲'父'），並且LI還有一個帶有LI的UL（我們稱之爲孩子）呢？您將背景應用於父級，並且在孩子下面也可以看到背景？因爲孩子位於父母的內部，所以他們必須改變他的身高，所以背景比打的更大，有兩種方法可以阻止這種情況，你可以（如前所述）將另一個背景放在孩子身上，或者你可以在父級內放置一個SPAN，並將背景放在SPAN上而不是LI.parent。

來源

2010-07-05 14:02:46 Dominique

有關係選擇>這意味着「立即兒」：

ul > li { 
    background-color: <your color>; 
}

但在使用它，我曾與跨平臺的兼容性問題。你也可以做的是設置了什麼規則的多個級別：

ul li { 
    background-color: <your color>; 
} 

ul li li { 
    background-color: none; 
}

來源

2010-07-05 14:28:19 amphetamachine

第二個選項是更好，因爲@Jonathan這正是我的意思是「但我有IE6不支持「>」子選擇 – 2010-09-03 00:14:02

在使用它時遇到了跨平臺兼容性問題。「 – amphetamachine 2010-09-04 12:10:44

不用擔心，我以爲你指的是Windows vs Linux vs Mac。 – 2010-09-04 13:47:01

將背景顏色應用於li而不是嵌套

回答

相關問題