css3 属性选择器加伪类选择器一起使用
先看代码,以下代码是可以工作,这里记录下实现机制。
<!DOCTYPE html> <html> <head> <style> p[class="a1"]:nth-of-type(5) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p class="a1">第一个段落。</p> <p class="a2">第二个段落。</p> <p class="a1">第三个段落。</p> <p class="a2">第四个段落。</p> <p class="a1">第五个段落。</p> </body> </html>
其最终效果是第五个p元素且该元素的类名为a1,而不是第五个p.a1元素。另外不确定这样用是否存在性能问题,待确认。