CSS 关于nth-child和nth-of-type

  之前在项目中一直用的都是nth-child，直到前几天遇到了一点问题：基本情况如下：

<div>
    <table id="head-table"></table>            <!--1-->
    <table class="statement-table"></table>    <!--2-->
    <table class="statement-table"></table>    <!--3-->
    <table class="statement-table"></table>    <!--4-->
</div>

  在这个案例中，我想选择类名为“statement-table”的第二个和第三个table为一个样式，而第一个head-table并不应用该样式。所以我写道：

.statement-table:not(:first-child){
    ··· ···
}

  然而效果并没有达到，因为 “:not” 不支持复杂的选择表达式，所以我就想到用nth-child，

.statement-table:nth-child(2){
    ··· ···
}
.statement-table:nth-child(3){
    ··· ···
} 

  问题来了，结果是 table2 与 table3 应用了样式，而不是table3 与 table4，好尴尬。查了一下W3C
，它对于nth-child的解释是

:nth-child(n) 选择器匹配属于其 父元素 的第 N 个子元素， 不论元素的类型。

  父元素，天，居然是父元素，我一直以为是选择该元素的第n个，所以是我的概念搞错了，以前的项目算是歪打正着了。那么上面的案列中是把table1也算上的，所以该怎么处理呢？ 不论元素的类型 ，也就是说有论元素类型的方法，它就是nth-of-type:

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。

.statement-table:nth-of-type(2){
    ··· ···
}
.statement-table:nth-of-type(3){
    ··· ···
} 

  问题来了，结果没变，还是table2和table3应用了样式。问题出在哪儿了呢？在做过很多实验后，发现问题处在了特定类型上，这个特定类型不是说我指定了“statement-table”这个类的类型，而是这个类之后的table标签类型，所以它又把table1给算上了，真是好大一个坑！

  怎么解决呢？可以把 table1 换成 ul 等标签实现，或者采用以下写法：

.statement-table:nth-last-of-type(2){
    ··· ···
}
.statement-table:nth-last-of-type(1){
    ··· ···
} 

没错，正面刚不过，可以选择从后面绕道，也就是从后往前数，不过也算是一种投机取巧的方法吧。大家有什么好的方法呢？希望可以提出来，大家一起学习，共同进步！