CSS選擇第一個孩子，如果它是某個標記

只有當它出現在div的第一個孩子時，我才需要選擇一個特定的元素。是否有一個CSS選擇器可以處理這種情況？CSS選擇第一個孩子，如果它是某個標記

例如，我要選擇這個數字：

<div> 
    <figure></figure> 
    <p></p> 
    <p></p> 
</div>

但我不想選擇這一項：

<div> 
    <p></p>  
    <figure></figure> 
    <p></p> 
</div>

我不能改變的HTML，這樣我就可以不添加班級。我知道:first-child和:first-of-type選擇器，但它們本身並不適合這種情況。我如何才能選擇第一個孩子，只有它是一個數字？

來源

2014-10-09 And Finally

'div圖：第一child' - http://jsfiddle.net/nvr761d6/ – Anonymous 2014-10-09 07:41:11

'：第一child'符合這種情況下*完美* .. – George 2014-10-09 07:44:45

要選擇'figure'是一個div *的第一個孩子*需要'DIV>圖：第一child' – Alohci 2014-10-09 08:21:14

數字：第一個孩子將選擇所有父母的第一個孩子的數字。

檢查此示例W3C。

來源

2014-10-09 07:41:04

@Tambo你能解釋一下爲什麼錯了？他問只有在第一個孩子時才選擇figure標籤，而我的問題解決了他的問題。我不明白你爲什麼不同意。 – 2014-10-09 08:48:18

你的回答是錯誤的。即使您的代碼不是第一個孩子，您的代碼也會突出顯示該數字。去檢查它。 – 2014-10-09 08:51:36

我沒有看到figure:first-child選擇器的任何問題。它將選擇<figure>元素只有當它是第一個孩子它的父母。

雖然:first-child表示父代的子樹中第一個子元素的任何元素，但figure部分將限制選擇器僅在元素爲<figure>時才匹配元素。

來源

2014-10-09 07:42:12

你可以使用CSS :first-child選擇與descendant selector這樣的：

的jsfiddle - DEMO

div figure:first-child { 
    color:red; 
}

OR：與CSS >child selector（由@Alohci的建議）

DEMO

div > figure:first-child { 
    color:red; 
}

來源

2014-10-09 07:42:48 Anonymous

使用div figure:first-child選擇。

這裏是例子

<div> 
    <figure>test</figure> 
    <p>div 1 pgraph1</p> 
    <p>div 1 pgraph1</p> 
</div> 

<div>  
    <p>div 2 pgraph1</p> 
    <figure>test 2</figure> 
    <p>div 2 pgraph1</p> 
</div>

CSS：

div figure:first-child{ 
    border:1px solid red; 
}

它將適用紅色邊框只到第一個孩子。

請參考fiddle for demo

來源

2014-10-09 07:46:02 Mazzu

你試過以下？

div figure { 
    color: green; 
} 
div figure:first-child { 
    color: blue; 
}

來源

2014-10-09 07:46:05 Stefan

CSS選擇第一個孩子，如果它是某個標記

回答

相關問題