CSS3select器：类名称的第一个types？
是否有可能使用CSS3select器:first-of-typeselect具有给定类名的第一个元素？ 我的testing没有成功，所以我觉得不是？
该代码（ http://jsfiddle.net/YWY4L/ ）：
p:first-of-type {color:blue} p.myclass1:first-of-type {color:red} .myclass2:first-of-type {color:green}
<div> <div>This text should appear as normal</div> <p>This text should be blue.</p> <p class="myclass1">This text should appear red.</p> <p class="myclass2">This text should appear green.</p> </div>
不，使用一个select器是不可能的。 第:first-of-type伪类select其types的第一个元素（ div ， p等）。 使用具有该伪类的类select器（或typesselect器）意味着如果元素具有给定的类（或给定types） 并且是其同类中的第一个types，则select该元素。
不幸的是，CSS没有提供:first-of-class只select第一个类的第一:first-of-classselect器。 作为一个解决方法，你可以使用这样的东西：
.myclass1 { color: red; } .myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
这里和这里给出了解决方法的解释和说明。
CSSselect器级别4草稿build议在:nth-childselect器中添加一个of <other-selector>语法。 这将允许你挑选第n个孩子匹配一个给定的其他select器：
:nth-child(1 of p.myclass)
以前的草稿使用了一个新的伪类:nth-match() ，所以你可以在这个特性的一些讨论中看到这个语法：
:nth-match(1 of p.myclass)
这已经在WebKit中实现，因此在Safari中可用，但似乎是唯一支持它的浏览器 。 Blink（Chrome） ， Gecko（Firefox）以及在Edge中实现它的请求都有提交，但是没有任何明显的进展。
我find了一个解决scheme供您参考。 从一些分组中选出两个相同的分组第一个分组
p[class*="myclass"]:not(:last-of-type) {color:red} p[class*="myclass"]:last-of-type {color:green}
顺便说一句，我不知道为什么:last-of-type作品，但:first-of-type不起作用。
我在jsfiddle上的实验… https://jsfiddle.net/aspanoz/m1sg4496/
这是一个古老的线程，但我正在回应，因为它仍然显示在search结果列表中。 现在，未来已经到来，您可以使用：nth-child伪select器。
p:nth-child(1) { color: blue; } p.myclass1:nth-child(1) { color: red; } p.myclass2:nth-child(1) { color: green; }
nth子伪select器是强大的 – 括号接受公式以及数字。
更多在这里： https : //developer.mozilla.org/en-US/docs/Web/CSS/ : nth-child
作为后备解决scheme，您可以将您的类封装在父元素中，如下所示：
<div> <div>This text should appear as normal</div> <p>This text should be blue.</p> <div> <!-- first-child / first-of-type starts from here --> <p class="myclass1">This text should appear red.</p> <p class="myclass2">This text should appear green.</p> </div> </div>
这不可能使用CSS3select器：首先select具有给定类名称的第一个元素。
但是，如果目标元素具有上一个元素的兄弟元素，则可以将负的CSS伪类和相邻的兄弟元素select器组合起来，以匹配不立即拥有上一个具有相同类名的元素的元素：
:not(.myclass1) + .myclass1
简单地说：首先为我工作，为什么没有提到这个呢？
