Css 使用同一类设置页面上第二个元素的样式

您好，有没有一种css方法可以使页面上的第二个元素的样式与第一个元素的样式略有不同

例如，我在一个页面上有两个ul，带有topbardropdownmenu类。我想给第二个ul一个与第一个不同的背景。有没有办法在不改变html的情况下做到这一点？

您可以使用：nth child，但IE可能会遇到麻烦。考虑这个jQuery备选方案：

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

---

什么包含

元素？我假设一个

…或者

---

div>ul.topbardropdownmenu:not（：first child）

您可以使用

:nth-child（）

伪选择器执行此操作。但它是CSS3，在某些浏览器中不受支持（例如，查看CSS3。

这取决于用户使用的浏览器，您可能可以使用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 */
}

---

：第一个子项在IE中不起作用，因此您可能需要使用服务器代码或javascript来修复此问题。

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

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 */
}