Question

Hello是否有一种方法可以使用css设置页面上第二个元素的样式，同一个类与第一个元素略有不同。

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

Answer 1

您可以使用:nth-child()伪选择器执行此操作。它虽然是CSS3，但在某些浏览器中不受支持（例如＆lt; = IE8＆amp;＆lt; = FF3.0不支持它）。

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

你可以用跨浏览器兼容的方式使用JavaScript，如果这是你的选择。

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)

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

Answer 4

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

Answer 5

您可以使用：nth-child http://css-tricks.com/how-nth-child-works/但IE可能会遇到困难。考虑一下这个jQuery替代方案：

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

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

样式第二个元素在页面上具有相同的类

5 个答案: