Question

CSS

#columns{
   width:100px; 
}

HTML

<html><body>
  <div id=columns>..1..</div>
  <div id=columns>..2..</div>
  <div id=columns>..3..</div>
  <div id=columns>..4..</div>
  <div id=columns>..5..</div>
  <div id=columns>..6..</div>  
</body></html>

现在，想象一下我想在CSS3中定义一个特殊的规则来为第三和第六个div做一个例外，我想要制作50px。有另一种方式（besode制作一个新的div名称，显然，因为我想让事情变得优雅并且所有人都使用完全相同的div ID。

非常感谢任何有关如何解决此问题的建议。谢谢！

Answer 1

:nth-child()

http://jsfiddle.net/tRbWP/

Answer 2

对于支持CSS3 nth-child伪类的浏览器：

    <style type="text/css">
      div > div { 
        width: 100px; 
      }
      div:nth-child(3), div:nth-child(6) {
        width: 50px;
      }
    </style>

HTML：

    <div>
      <div>..1..</div>
      <div>..2..</div>
      <div>..3..</div>
      <div>..4..</div>
      <div>..5..</div>
      <div>..6..</div>  
    </div>

Answer 3

使用nth-child伪类，使用0n，这样就可以选择没有分组的子项。

div:nth-child(3), div:nth-child(6) { width: 50px; }

如何定义第三次出现DIV的例外？

3 个答案: