如何将样式应用于仅出现的第一个类？

Question

所以我试图将特定样式仅应用于类名为.one_third的页面上出现的第一个类。我有这个类的三列和三行，因此共有9个类。我试图只制作第一个，左上角，黑色背景。

我试图用Pseudo-classes自己创建它，我想出了这个：

.one_third:first-child

虽然这使得最左边的所有课程都是黑色的，而不仅仅是左上角的课程。

然后我尝试了这个，将它应用于包含所有类的content div，但是没有做任何事情。

#content > .one_third:first-child

我怎么能实现这个目标？

编辑： 这是我确切的HTML标记：

Answer 1

例如，

 <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或更低版本

Answer 2

变化：

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

Answer 3

如果其中一个适合您，您可以检查以下任何内容：

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

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

正如您已经使用过的那样：#content div.one_third:first-child{color:red;}这就是我放这些的原因。检查并告诉我。