用同一类别在页面上修改第二个元素的样式

Question

您好，有没有一种使用CSS来为页面上具有相同类的第二个元素添加略微不同样式的方法。

例如，我在页面上有两个class为topbardropdownmenu的ul元素。我想要给第二个ul元素一个与第一个不同的背景颜色。是否有一种方法可以在不更改HTML的情况下实现呢？

- Ben Paton

Answer 1

你可以通过使用:nth-child()伪选择器来实现。不过这是CSS3的功能，在某些浏览器中并不支持（例如 <=IE8 和 <=FF3.0 不支持它）。

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

如果这对你来说是一个可选项，你可以使用JavaScript以跨浏览器兼容的方式完成。

- simshaun

Answer 2

什么容纳了 <ul> 元素？我会假设是一个 <div id = "lists">

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

}

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

}

... 或者选择另外一种方式

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

- Stefan Kendall

---

:first-child在IE中不起作用，因此您可能需要使用服务器代码或JavaScript来解决此问题。 - Stefan Kendall

Answer 3

这取决于你的用户使用哪种浏览器，你可以尝试使用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 */
}

- David Thomas

---

当你说“这取决于哪些浏览器”时，你指的是哪些浏览器？有哪些浏览器不支持此功能？ - Halo

我相信现在所有的浏览器都支持:nth-of-type()了，但是这个答案是在11年前写的，差不多已经12年了。事情已经有了很大的改善。 - David Thomas

哦，谢谢您对一个几乎和我一样老的帖子的快速回复。 - Halo

Answer 4

看看 CSS3 的 nth-child() 伪类。

- ChrisJ

Answer 5

你可以使用:nth-child http://css-tricks.com/how-nth-child-works/，但IE可能会有问题。考虑使用这个jQuery替代方案：

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

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

- Matt Asbury