是否可以使用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 >


当前回答

我找到了有用的东西 如果你有一个更大的类,其中包含网格之类的东西,你的另一个类的所有元素 你可以这样做

div.col-md-4:nth-child(1).myclass{    
border: 1px solid #000;     
}        

其他回答

我找到了一个解决方案供你参考。从一些组div选择从组的两个相同的类div的第一个

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

顺便说一句,我不知道为什么:最后一种类型的工作,但:第一种类型不工作。

我的jsfiddle实验…https://jsfiddle.net/aspanoz/m1sg4496/

我找到了有用的东西 如果你有一个更大的类,其中包含网格之类的东西,你的另一个类的所有元素 你可以这样做

div.col-md-4:nth-child(1).myclass{    
border: 1px solid #000;     
}        

简单地说:第一个对我有用,为什么还没有提到这个?

不,只使用一个选择器是不可能的。:first-of-type伪类选择其类型的第一个元素(div、p等)。对该伪类使用类选择器(或类型选择器)意味着,如果一个元素具有给定的类(或具有给定的类型),并且在其兄弟类中是其类型的第一个,则选择该元素。

不幸的是,CSS没有提供只选择类的第一个出现的:first-of-class选择器。作为一种变通方法,你可以使用这样的东西:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent 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中实现它,但这些都没有明显的进展。