如何將樣式應用於僅發生的第一類？

所以我試圖將一個特定的樣式應用於僅在類名爲.one_third的頁面上發生的第一類。我有三節課，三節課，因此共有9門課程。我試圖只做第一個，左上角是黑色，背景是黑色。如何將樣式應用於僅發生的第一類？

我試圖用僞類創建它自己，我想出了這個：

.one_third:first-child

雖然這所做的所有最左邊的類黑，而不只是左上角之一。

然後，我試了一下，將其應用於我的content div，該div包含所有類，但未能做任何事情。

#content > .one_third:first-child

我怎麼能做到這一點？

編輯：這是我確切的HTML標記：

enter image description here

來源

2013-11-28 Fizzix

顯示HTML標記。 – Hiral

如果它適合你，你可以試試這個：'.one-third：first' –

Typo？你的目標是'.one-third'，但divs有一類'one_third'。更正它工作正常：http://jsfiddle.net/j08691/y5TB3/ – j08691

例如，

<div class="jey"> 
    <p>Number 1</p> 
    <p>Number 2</p> 
    <p>Number 3</p> 
</div> 
<div class="jey"> 
    <p>Number 1</p> 
    <p>Number 2</p> 
    <p>Number 3</p> 
</div>

將樣式

.jey:first-of-type{ 
    background-color:Red; 
    }

看到這個http://jsfiddle.net/jeyashri_shri/Td8bx/

，這一次在你的代碼

#content .one_third:first-child { 
color:red; 
}

但首先，孩子在IE工作還工作，一個'<!DOCTYPE>'必須申報。
它在IE7 +工作，但不是在IE6或更低

來源

2013-11-28 05:21:03

仍使左側的所有類都具有背景，而不僅僅是第一次出現。 – Fizzix

ok.wait.I將給出另一個解決方案 –

。one_third：first-of-type {background_color：Red; } –

變化：

<div class="one_third> //you forgot to add closing quote

到

<div class="one_third">

和

.one-third:first-child //class name is incorrect

到

.one_third:first-child

Fiddle here.

來源

2013-11-28 05:23:09 Hiral

Hiral，請重新檢查我的帖子。自從我忘記我的班級有下劃線，而不是連字符，我有一些錯字。 – Fizzix

@fizzix使小提琴。 – Hiral

@downvoter fizzix在我回答後更改了他的帖子。任何原因downvoting ?? – Hiral

您可以檢查以下任何一種，如果其中一人對你的作品：

.clear div.one_third:first-child{ 
    color:red; 
} 

.columns div.one_third:first-child{ 
    color:red; 
}

正如你已經使用了這一點：#content div.one_third:first-child{color:red;}這就是爲什麼我把那些。檢查並讓我知道。

來源

2013-11-28 05:43:54

不幸的是，你的兩個解決方案似乎仍然使最左邊的所有類都有風格，而不僅僅是第一個。 – Fizzix

好的。讓你的完整代碼jsfiddle。 –

如何將樣式應用於僅發生的第一類？

回答

相關問題