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

Posted 2023-03-06

【中文标题】CSS3选择器：类名的第一个类型？

【英文标题】：CSS3 selector :first-of-type with class name?

【发布时间】：2011-09-20 18:45:37

【问题描述】：

是否可以使用 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>

【问题讨论】：

这能回答你的问题吗？ CSS selector for first element with class

【参考方案1】：

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

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

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

解决方法的说明和插图在here 和here 中给出。

【讨论】：

否 @justNik 这确实适用于多个元素。 .myclass1 选择器将选择.myclass1 的每个元素。选择器.myclass1 ~ .myclass1 使用通用兄弟组合器来选择每个具有.myclass1 类的元素，它是具有.myclass1 类的元素的后续兄弟。这解释得非常详细here。

【参考方案2】：

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

:nth-child(1 of p.myclass) 

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

:nth-match(1 of p.myclass)

现在是implemented in WebKit，因此在 Safari 中可用，但似乎是 the only browser that supports it。已经提交了实现它的请求 Blink (Chrome)、Gecko (Firefox) 和 request to implement it in Edge，但其中任何一个都没有明显的进展。

【参考方案3】：

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

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

【参考方案4】：

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

【讨论】：

这不能按要求工作，从小提琴中已经可以看出。这样做的唯一一件事是 not 如果它没有类，则选择最后一个 div。

【参考方案5】：

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

【讨论】：

:first 是一个与打印相关的伪类。

【参考方案6】：

这是一个旧线程，但我之所以做出回应，是因为它仍然在搜索结果列表中排名靠前。现在未来已经到来，您可以使用 :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/en-US/docs/Web/CSS/:nth-child

【讨论】：

是的，我认为这行不通，至少在 Chrome 中不行...jsfiddle.net/YWY4L/91

“既然未来已经到来”是什么意思？在撰写本文时，这只适用于 Safari。

【参考方案7】：

这不可能使用 CSS3 选择器 :first-of-type 来选择具有给定类名的第一个元素。

但是，如果目标元素有前一个元素兄弟，您可以组合 negation CSS pseudo-class 和 adjacent sibling selectors 来匹配一个没有立即具有相同类名的前一个元素的元素：

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

【参考方案8】：

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

【讨论】：

如果您在用户 A 之前放置 <p> 标签，这将停止工作。请参见此处：codepen.io/dearsina/pen/GRoBjZa

【参考方案9】：

您可以通过选择该类中属于同一类的兄弟的每个元素并将其反转来做到这一点，这将选择页面上的几乎所有元素，因此您必须再次选择该类。

例如：

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

【讨论】：

还是不行。见codepen.io/dearsina/pen/RwrBGGO

适用于我的情况。它为具有该类的第一个元素设置样式。

【参考方案10】：

我发现了一些有用的东西 如果你有一个更大的类，其中包含类似网格的东西，你的另一个类的所有元素 你可以这样做

div.col-md-4:nth-child(1).myclass    
border: 1px solid #000;