風格第二個元素在頁面上具有相同的類

你好是有一種方法與CSS風格的第二個元素在頁面上具有相同的類與第一個稍微不同。風格第二個元素在頁面上具有相同的類

例如，我有一個頁面上有兩個ul，其中有一類topbardropdownmenu。我想給第二個ul第一個不同的背景。有沒有辦法做到這一點與改變HTML？

2011-01-06 Ben Paton

什麼持有<ul>元素？我假設一個<div id = "lists">

/* First element */ 
div > ul.topbardropdownmenu:first-child{ 

} 

/* Rest of the elements */ 
div > ul.topbardropdownmenu{ 

}

...或者

div > ul.topbardropdownmenu:not(:first-child)

來源

2011-01-06 20:59:00

：第一個孩子在IE中不起作用，所以您可能需要使用服務器代碼或JavaScript來解決此問題。 – 2011-01-06 20:59:24

您可以使用：nth-child http://css-tricks.com/how-nth-child-works/但IE可能會與它鬥爭。考慮這個jQuery的選擇：

$(".class").eq(1).css();

http://api.jquery.com/eq/

來源

2011-01-06 20:58:46

您可以用:nth-child()僞選擇這樣做。這是CSS3，但不支持在某些瀏覽器（例如< = IE8 & < = FF3.0不支持它）。

.topbardropdownmenu:nth-child(2) { background: #FF0000; }

你可以用JavaScript做一個跨瀏覽器兼容的方式不過，如果這是一個選擇。

來源

2011-01-06 21:00:05 simshaun

看看CSS3 nth-child() pseudo-class。

來源

2011-01-06 21:00:25 ChrisJ

這取決於哪些瀏覽您的用戶使用，您可能能夠使用nth-of-type CSS僞選擇：

ul.topbardropdownmenu:nth-of-type(2) { 
    /* styles the second ul of class=topbardropdownmenu 
}

如果有這些ul元素髮生的特定模式，你可以使用後代和/或兄弟選擇器：

div > ul.topbardropdownmenu { 
    /* styles all ul.topbardropdownmenu that are the immediate descendants of a div */ 
} 

p + ul.topbardropdownmenu { 
    /* styles all ul.topbardropdownmenu that immediately follow a p */ 
}

來源

2011-01-06 21:01:27

風格第二個元素在頁面上具有相同的類

回答

相關問題