css - 第一个表的 CSS

Question

我有一个看起来像这样的结构：

<div class="foo">
    <table>
        //...
    </table>
    <table>
        //...
    </table>
</div>

我想要的是仅在第一张桌子上应用特定的 css 规则，这怎么能做到？

Answer 1

我认为应该这样做。

 table:nth-of-type(1)
    {
        /*style away */
    }

Answer 2

.foo > :first-child

或者

.foo > table:first-of-type

table后者是如果您在in之前有一个非表格元素.foo。前者确保只有.foo那些是第一个孩子的孩子才会被指定，而不仅仅是任何第一个孩子的后代.foo。

Answer 3

使用 CSS3 之类的...

.foo table:first-child {
  // Do somthing
}

---

后备：（通过使用 jQuery）

$('.foo table:first-child').addClass('first-child');

所以CSS喜欢..

.foo table:first-child, .foo table.first-child {
      // Do somthing
}

Answer 4

http://jsfiddle.net/tnjVR/

.foo table:first-child {
    color:Red;
}

Answer 5

试试看

.selector table:first-child {
color:Red;
}

Answer 6

nth-of-type, first-child, nth-child, 或者first-of-type会这样做...

table:nth-of-type(1) {
    ...
}

table:first-of-type {
    ...
}

table:first-child {
    ...
}

table:nth-child(1) {
    ...
}

演示