第一个表的CSS

我有这样一个结构：

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

我想要的是只在第一个表上应用特定的css规则，如何做到这一点？

使用CSS3，比如

回退：通过使用jQuery

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

所以我喜欢

---

我想这应该可以

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

第n个类型，第一个孩子，第n个孩子，或第一个类型会这样做

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

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

table:first-child {
    ...
}

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

试着

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

或

---

后者是指在.foo中的table之前有一个非table元素。前者确保只指定.foo的第一个孩子，而不仅仅是.foo的任何第一个孩子后代。

为什么不使用类或id？请不要参考w3schools@Bondye哦抱歉，在此之前，我不知道这具有在几乎所有支持CSS的浏览器上工作的优势，即使是旧版本的IE。但是请注意，选择器匹配任何作为其父级的第一个子级并且是foo类中某个元素的子代的表元素。因此，在更复杂的情况下，它可能匹配得太多。

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

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

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

table:first-child {
    ...
}

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

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

.foo > :first-child

.foo > table:first-of-type