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

Question

你好,有一种方法用css来设置页面上第二个元素的样式,同一个类与第一个元素略有不同.

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

Answer 1

您可以使用:nth-child()伪选择器执行此操作.它是CSS3,并且在某些浏览器中不受支持(例如<= IE8&<= 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-typecss 伪选择器：

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