是否可以使用CSS3选择器:first-of-type选择具有给定类名的第一个元素?我的测试不成功,所以我想这不是?
守则(http://jsfiddle.net/YWY4L/):)
p: first-of-type{颜色:蓝色}
p.myclass1: first-of-type{颜色:红}
.myclass2: first-of-type{颜色:绿色}
< div >
<div>此文本应该正常显示</div>
<p>这个文本应该是蓝色的
<p class="myclass1">这段文字应该是红色的
<p class="myclass2">这段文字应该是绿色的
< / div >
这是不可能使用CSS3选择器:first-of-type选择具有给定类名的第一个元素。
但是,如果目标元素有一个先前的兄弟元素,你可以结合否定CSS伪类和相邻的兄弟元素选择器来匹配一个没有立即具有相同类名的前一个元素的元素:
:not(.myclass1) + .myclass1
完整的工作代码示例:
p: first-of-type{颜色:蓝色}
P:not(.myclass1) + .myclass1{颜色:红色}
P:not(.myclass2) + .myclass2{颜色:绿色}
< div >
<div>此文本应该正常显示</div>
<p>这个文本应该是蓝色的
<p class="myclass1">这段文字应该是红色的
<p class="myclass2">这段文字应该是绿色的
< / div >
CSS selector Level 4草案建议在:n -child选择器中添加一个<other-selector>语法。这将允许你挑选出与给定的其他选择器匹配的第n个子元素:
:nth-child(1 of p.myclass)
以前的草案使用了一个新的伪类:n -match(),所以你可能会在一些关于该特性的讨论中看到该语法:
:nth-match(1 of p.myclass)
这个功能现在已经在WebKit中实现了,因此也可以在Safari中使用,但Safari似乎是唯一支持它的浏览器。有人申请在Blink (Chrome)和Gecko (Firefox)中实现它,并请求在Edge中实现它,但这些都没有明显的进展。