CSS3选择器：具有类名的第一个类型？

是否可以使用CSS3选择器:first-of-type选择具有给定类名称的第一个元素？我的考试没有成功，所以我认为不是吗？

代码（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>

不，仅使用一个选择器是不可能的。的:first-of-type伪类选择其的第一个元素类型（div，p等）。将类选择器（或类型选择器）与该伪类一起使用意味着，如果元素具有给定的类（或属于给定的类型）并且是其同级中的第一个元素，则选择该元素。

不幸的是，CSS没有提供:first-of-class仅选择类的第一次出现的选择器。解决方法是，可以使用以下方法：

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

有关解决方法的说明和图示，请参见此处和此处。

草案CSS Selectors Level 4提议of <other-selector>在:nth-child选择器中添加语法。这将允许您挑选与给定其他选择器匹配的第n个孩子：

:nth-child(1 of p.myclass) 

先前的草案使用了一个新的伪类，:nth-match()因此在对该功能的某些讨论中您可能会看到该语法：

:nth-match(1 of p.myclass)

现在，它已在WebKit中实现，因此可在Safari中使用，但它似乎是唯一支持它的浏览器。已经提交了实施Blink（Chrome），Gecko（Firefox）的票证，以及在Edge中实施该请求的请求，但是在这些方面都没有明显的进展。

这个吧 不是可以使用CSS3选择器：首个类型与给定的类名来选择的第一要素。

但是，如果目标元素具有先前的元素同级，则可以组合使用否定CSS伪类和相邻的兄弟选择器，以匹配没有立即具有相同类名的先前元素的元素：

:not(.myclass1) + .myclass1

完整的工作代码示例：

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { 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>

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

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/

这是一个旧线程，但我正在回应，因为它在搜索结果列表中仍然显得很高。现在，未来已经到来，您可以使用：nth-​​child伪选择器。

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

：nth-​​child伪选择器功能强大-括号可以接受公式以及数字。

此处更多内容：https：//developer.mozilla.org/zh-CN/docs/Web/CSS/：nth-child

作为后备解决方案，您可以将类包装在一个父元素中，如下所示：

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

不知道如何解释这一点，但今天我遇到了类似的情况。不能够设置.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>

您可以通过选择该类中同级兄弟中的每个元素并将其反转来完成此操作，这将选择页面上几乎所有的元素，因此您必须再次按该类进行选择。

例如：

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

只是:first对我有用，为什么还没有提到呢？