說我有CSS：選擇器不適用於不同的標籤？

<div class="myClass"> 
    <div class="child"></div> 
    <span class="child"></span> 
    <a class="child"></a> 
</div>

如果我使用

.child:first-of-type { /* Code here */ }

然後，所有三個標籤獲得的CSS代碼，因爲它們都是不同的類型。有沒有辦法仍然使用這個選擇器，但有不同的標籤？

來源

2013-08-25 Kousha

可能重複：？http://stackoverflow.com/questions/2717480/css-selector-for-first - 元素，用一流 – aug

demo

第一的類型來選擇它的類型，但你定義的每一個孩子不同的類型。在演示中，我提供了另外兩個div（of-type），其中第一個div被選中，另一個（of-type）是跨度，這是隻有一個，所以它選擇是否添加更多的跨度，然後它不會'選擇其他跨度。

在你的情況，如果你想只選擇第一再申請:first-child

的：首個型CSS僞類表示它的類型在其父的孩子列表中的第一個兄弟元件。從MDN採取source

實施例提供的源上方

div :first-of-type { 
    /*background-color: lime;*/ 
    font-weight: bold; 
} 


<div> 
    <span>This span is first!</span> 
    <span>This span is not. :(</span> 
    <span>what about this <em>nested element</em>?</span> 
    <strike>This is another type</strike> 
    <span>Sadly, this one is not...</span> 
</div>

結果：

這跨度第一！這個跨度不是。 :(你看這個嵌套元素這是另一種類型的可悲的是，這個人是不是...

來源

2013-08-25 04:00:52

只需將標籤添加到選擇器，例如，

div.child:first-of-type { /* Code here */ }

來源

2013-08-25 03:53:14 Musa

From docs:

僞類:first-of-type

的:first-of-type僞類表示是其在它的父元素的子元素的列表類型的第一個同級元素。與:nth-of-type(1)相同。

語法

selector:first-of-type{ properties }

來源

2013-08-25 03:58:15

CSS：選擇器不適用於不同的標籤？

回答

demo

相關問題