我找到了一个解决方案供你参考。从一些组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/

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中实现它，但这些都没有明显的进展。

我找到了一个解决方案供你参考。从一些组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/

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

这是不可能使用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 >

不知道怎么解释，但我今天遇到了类似的事情。 无法设置.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>