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

CSS3 selector :first-of-type with class name?

提问by Adam Youngers

Is it possible to use the CSS3 selector :first-of-typeto select the first element with a given class name? I haven't been successful with my test so I'm thinking it's not?

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

The Code (http://jsfiddle.net/YWY4L/):

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

回答by BoltClock

No, it's not possible using just one selector. The :first-of-typepseudo-class selects the first element of its type(div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) andis the first of its type among its siblings.

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

Unfortunately, CSS doesn't provide a :first-of-classselector that only chooses the first occurrence of a class. As a workaround, you can use something like this:

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

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

Explanations and illustrations for the workaround are given hereand here.

此处和此处给出了解决方法的说明和插图。

回答by Brian Campbell

The draft CSS Selectors Level 4 proposes to add an of <other-selector>grammar within the :nth-childselector. This would allow you to pick out the nth child matching a given other selector:

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

:nth-child(1 of p.myclass) 

Previous drafts used a new pseudo-class, :nth-match(), so you may see that syntax in some discussions of the feature:

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

:nth-match(1 of p.myclass)

This has now been implemented in WebKit, and is thus available in Safari, but that appears to be the only browser that supports it. There are tickets filed for implementing it Blink (Chrome), Gecko (Firefox), and a request to implement it in Edge, but no apparent progress on any of these.

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

回答by lodz

This it notpossible to use the CSS3 selector :first-of-typeto select the first element with a given class name.

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

However, if the targeted element has a previous element sibling, you can combine the negation CSS pseudo-classand the adjacent sibling selectorsto match an element that doesn't immediately have a previous element with the same class name :

但是，如果目标元素有一个前一个元素的兄弟元素，你可以结合否定 CSS 伪类和相邻的兄弟选择器来匹配一个元素，该元素没有立即具有相同类名的前一个元素：

:not(.myclass1) + .myclass1

Full working code example:

完整的工作代码示例：

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>

回答by Konstantin

I found a solution for your reference. from some group divs select from group of two same class divs the first one

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

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

BTW, I don't know why :last-of-typeworks, but :first-of-typedoes not work.

顺便说一句，我不知道为什么:last-of-type有效，但:first-of-type不起作用。

My experiments on jsfiddle... https://jsfiddle.net/aspanoz/m1sg4496/

我在 jsfiddle 上的实验... https://jsfiddle.net/aspanoz/m1sg4496/

回答by TDavison

This is an old thread, but I'm responding because it still appears high in the list of search results. Now that the future has arrived, you can use the :nth-child pseudo-selector.

这是一个旧线程，但我做出了回应，因为它仍然出现在搜索结果列表的前列。现在未来已经到来，您可以使用 :nth-child 伪选择器。

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

The :nth-child pseudo-selector is powerful - the parentheses accept formulas as well as numbers.

:nth-child 伪选择器功能强大 - 括号接受公式和数字。

More here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

更多信息：https: //developer.mozilla.org/en-US/docs/Web/CSS/: nth-child

回答by Gediminas Bivainis

As a fallback solution, you could wrap your classes in a parent element like this:

作为后备解决方案，您可以将类包装在这样的父元素中：

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

回答by adrianTNT

Not sure how to explain this but I ran into something similar today. Not being able to set .user:first-of-type{}while .user:last-of-type{}worked fine. This was fixed after I wrapped them inside a div without any class or styling:

不知道如何解释这一点，但我今天遇到了类似的事情。不能够设置.user:first-of-type{}而.user:last-of-type{}工作的罚款。这是在我将它们包裹在没有任何类或样式的 div 中后修复的：

https://codepen.io/adrianTNT/pen/WgEpbE

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>

回答by Jonathan.

You can do this by selecting every element of the class that is the sibling of the same class and inverting it, which will select pretty much every element on the page, so then you have to select by the class again.

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

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>

回答by Eduard Ge

Simply :firstworks for me, why isn't this mentioned yet?

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