您好,有没有一种使用CSS来为页面上具有相同类的第二个元素添加略微不同样式的方法。
例如,我在页面上有两个class为topbardropdownmenu的ul元素。我想要给第二个ul元素一个与第一个不同的背景颜色。是否有一种方法可以在不更改HTML的情况下实现呢?
您好,有没有一种使用CSS来为页面上具有相同类的第二个元素添加略微不同样式的方法。
例如,我在页面上有两个class为topbardropdownmenu的ul元素。我想要给第二个ul元素一个与第一个不同的背景颜色。是否有一种方法可以在不更改HTML的情况下实现呢?
你可以通过使用:nth-child()
伪选择器来实现。不过这是CSS3的功能,在某些浏览器中并不支持(例如 <=IE8 和 <=FF3.0 不支持它)。
.topbardropdownmenu:nth-child(2) { background: #FF0000; }
如果这对你来说是一个可选项,你可以使用JavaScript以跨浏览器兼容的方式完成。
什么容纳了 <ul>
元素?我会假设是一个 <div id = "lists">
/* First element */
div > ul.topbardropdownmenu:first-child{
}
/* Rest of the elements */
div > ul.topbardropdownmenu{
}
... 或者选择另外一种方式
div > ul.topbardropdownmenu:not(:first-child)
这取决于你的用户使用哪种浏览器,你可以尝试使用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 */
}
:nth-of-type()
了,但是这个答案是在11年前写的,差不多已经12年了。事情已经有了很大的改善。 - David Thomas你可以使用:nth-child http://css-tricks.com/how-nth-child-works/,但IE可能会有问题。考虑使用这个jQuery替代方案:
$(".class").eq(1).css();