是否可以使用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 >
当前回答
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中实现它，但这些都没有明显的进展。
其他回答
这是一个旧的帖子，但我回复，因为它仍然出现在搜索结果列表的高。现在，未来已经到来，您可以使用:n -child伪选择器。
p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }
:n -child伪选择器功能强大——括号接受公式和数字。
更多信息请点击:https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
不，只使用一个选择器是不可能的。:first-of-type伪类选择其类型的第一个元素(div、p等)。对该伪类使用类选择器(或类型选择器)意味着，如果一个元素具有给定的类(或具有给定的类型)，并且在其兄弟类中是其类型的第一个，则选择该元素。
不幸的是，CSS没有提供只选择类的第一个出现的:first-of-class选择器。作为一种变通方法，你可以使用这样的东西:
.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
这里和这里给出了解决方法的解释和插图。
不知道怎么解释，但我今天遇到了类似的事情。 无法设置.user:first-of-type{}而.user:last-of-type{}正常工作。 这是固定后，我包装他们在一个div没有任何类或样式:
https://codepen.io/adrianTNT/pen/WgEpbE
<style>
.user{
display:block;
background-color:#FFCC00;
}
.user:first-of-type{
background-color:#FF0000;
}
</style>
<p>Not working while this P additional tag exists</p>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
<p>Working while inside a div:</p>
<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>
您可以通过选择类中相同类的兄弟元素并反转它来实现这一点，这将选择页面上的几乎所有元素，因此您必须再次按类进行选择。
eg:
<style>
:not(.bar ~ .bar).bar {
color: red;
}
<div>
<div class="foo"></div>
<div class="bar"></div> <!-- Only this will be selected -->
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
</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中实现它，但这些都没有明显的进展。
