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

166

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

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>

来源

2011-06-22 Adam Youngers

264

不，它仅仅使用一个选择是不可能的。 :first-of-type伪类选择其类型（div,p等）的第一个元素。使用具有该伪类的类选择器（或类型选择器）意味着如果元素具有给定类别（或具有给定类型），则选择元素和是其同类中的第一个类型。

不幸的是，CSS不提供:first-of-class选择器，它只选择类的第一个匹配项。作为一种变通方法，您可以使用这样的事情：

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

介绍和说明的解决方法，给出here和here。

来源

2011-06-22 22:00:04 BoltClock

该作品如果你只有2个元素，但失败更多）： –

否@justNik这对多个元素有效。 '.myclass1'选择器将选择'.myclass1'的每个元素。选择器'.myclass1〜.myclass1'使用通用兄弟组合器来选择每个具有'.myclass1'类的元素，该类是具有'.myclass1'类的元素的后续兄弟。这是详细解释[** here **]（http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107）。 – WebWanderer

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

:nth-child(1 of p.myclass)

以前的草案使用了新的伪类，:nth-match()，所以你可以看到，语法特征的一些讨论：

:nth-match(1 of p.myclass)

这现在已经implemented in WebKit，因而在Safari浏览器可用，但似乎是the only browser that supports it。有,Gecko (Firefox)和request to implement it in Edge实施它的门票，但没有任何明显的进展。

来源

2013-10-20 05:09:37

+84

只有10年，我可以使用它。尽管我将使用这个项目需要明天完成。 –

：nth-match（）已被删除以支持nth-child（）的新功能，但尚未得到很好的支持：http://caniuse.com/#feat=css-nth-child-of – nabrown78

@ nabrown78谢谢为了抬头，更新了答案是最新的。 –

作为备用的解决方案，你可以换你的班，这样的父元素：

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

来源

2015-10-28 14:30:31

我发现，供大家参考的解决方案。从一些组的div从两个同等级的组选择BTW 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/

来源

2016-07-26 13:56:28 Konstantin

-3

简单：首先对我的作品，为什么心不是这个没有提到？

来源

2016-11-23 14:58:41

['：first']（https://developer.mozilla.org/en-US/docs/Web/CSS/:first）是与打印相关的伪类。 – Stijn

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

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

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

来源

2017-02-22 13:16:21 TDavison

是的，我不认为这是有效的，至少不是在Chrome ... http://jsfiddle.net/YWY4L/91/ –

你是什么意思，“现在，未来已经到来”？这只能在写作时用于Safari。 –

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

然而，如果目标元素有前一个元素的兄弟姐妹，你可以结合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>

来源

2017-05-17 23:14:20 lodz

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

回答

相关问题