作为一个后备方案，你可以像这样在父元素中包装你的类:

<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>

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

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

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

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent 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>

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