CSS3選擇器：類名稱的第一個類型？

Question

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

Answer 1

不，它僅僅使用一個選擇是不可能的。 :first-of-type僞類選擇其類型（div,p等）的第一個元素。使用具有該僞類的類選擇器（或類型選擇器）意味着如果元素具有給定類別（或具有給定類型），則選擇元素和是其同類中的第一個類型。

不幸的是，CSS不提供:first-of-class選擇器，它只選擇類的第一個匹配項。作爲一種變通方法，您可以使用這樣的事情：

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

介紹和說明的解決方法，給出here和here。

Answer 2

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實施它的門票，但沒有任何明顯的進展。

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

Answer 4

我發現，供大家參考的解決方案。從一些組的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/

Answer 5

簡單：首先對我的作品，爲什麼心不是這個沒有提到？

Answer 6

這是一箇舊線程，但我在迴應，因爲它在搜索結果列表中仍然顯示爲高。現在未來已經到來，您可以使用：nth-​​child僞選擇器。

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

nth子僞選擇器功能強大 - 括號接受公式以及數字。

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

Answer 7

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