相关疑难解决方法(0)

是否有可能让第n个子伪选择器与特定类一起工作？

看到这个例子:http: //jsfiddle.net/fZGvH/

我希望第二个DIV.red转红色,但它不会按预期应用颜色.

不仅如此,当你指定它时,它会将第5个DIV更改为红色:

div.red:nth-child(6)

指定此项时,它会将第8个DIV更改为红色:

div.red:nth-child(9)

这似乎是落后的一个DIV.示例中只有8个DIV标记,因此我不知道为什么nth-child(9)甚至可以正常工作.使用Firefox 3.6进行测试,但在我的实际生产代码中,Chrome中出现同样的问题.我不理解这应该如何工作,希望澄清.

此外,这会将第6个DIV更改为红色,但我真正想要的是将第二个DIV.red更改为红色:

div.red:nth-of-type(6)

我不明白为什么nth-child()和nth-of-type()的响应不同,因为文档中只有八个相同类型的标签.

我正在尝试选择具有特定data-属性的元素的第一个和最后一个子元素.

该:first-child选择器工作正常,但:last-child不能正常工作.我真的不知道是什么原因引起的.我检查过拼写错误.

CSS

.element[data-type='element']:first-child {
    padding-left: 0;   
    background-color:red !important
}

.element[data-type='element']:last-child {
    padding-right: 0; 
    border-right:0; 
    background-color:red !important;
}