-1

I am having a problem with a simple first of type css issue

I have

<div class='test'>
   <div>test 1</div>  
   <div>test 2</div>  

</div>

<div class='test'>
   <div>test 3</div>  
   <div>test 4</div>  
</div>

<div class='test'>
   <div>test 5</div>  
   <div>test 6</div>  
</div>

I want the first test div showing background red and the rest are blue.

I have 

.test{
  background-color: blue;
  margin: 15px;
  border-top: dashed 1px grey;
}

.test:first-of-type{
  background-color: red;
  border-top:0;
}

but all my divs are showing blue. Am I doing something wrong here? Thanks for the help!

4

3 回答 3

2

只需复制粘贴上面的脚本，它就可以在这里正常工作。

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_first-of-type

可能浏览器有问题

于 2012-12-13T22:57:06.347 回答
1

它适用于我的 ie9 和小提琴中的 ff。

我的猜测是您使用的浏览器不支持 css3。我建议只在第一个类上放置另一个类，以便向后兼容。

这是它的兼容性： http ://reference.sitepoint.com/css/pseudoclass-firstoftype

于 2012-12-13T23:01:36.057 回答
1

发布的代码有效，并且对:first-of-type选择器的支持很广泛。也许您在 IE 8 或更早版本上进行测试？或者也许在 IE 9 上但在Quirks 模式下？或者，可能有一些div在div元素之前。如果这没有帮助，请发布完整的文档并确定用于测试的浏览器。

于 2012-12-13T22:59:27.013 回答