[分享]css偶数行选择器不好使的原因

CSS偶数行选择器常常被人们用来对网页中的表格、列表进行样式设计。不过，在实际使用过程中，你可能会发现：偶数行选择器并不总是能够生效。这是为什么呢？/ 偶数行选择器 / tr:nthchild(eve...

CSS偶数行选择器常常被人们用来对网页中的表格、列表进行样式设计。不过，在实际使用过程中，你可能会发现：偶数行选择器并不总是能够生效。这是为什么呢？

/* 偶数行选择器 */
tr:nth-child(even) {
  background-color: #f2f2f2;
} 

造成偶数行选择器无效的原因主要有两种：

一、CSS解析机制原因

在HTML中，元素之间存在空格、换行等字符，这些字符被称为“空白节点（Whitespace Node）”。在浏览器解析HTML页面时，这些空白节点也会被视为一个节点，即DOM中的文本节点。偶数行选择器在选择偶数行时，是根据文本节点的数量来计算的。如果文本节点的数量不符合预期，偶数行选择器的效果就会失效。

比如下面这个例子：

<table>
  <tr><td>1</td><td>2</td></tr>
  <tr><td>3</td><td>4</td></tr>
  <tr><td>5</td><td>6</td></tr>
</table> 

这个表格中实际上有7个文本节点，即每行的换行符都会被作为一个文本节点。因此，如果我们想让偶数行的背景色为灰色，需要使用以下的CSS代码：

/* 偶数行选择器 */
tr:nth-child(2n) {
  background-color: #f2f2f2;
} 

二、浏览器兼容性问题

有些浏览器并不支持偶数行选择器，比如IE6、IE7等早期版本。在这些浏览器中，我们必须使用JavaScript或者Hack方式来实现偶数行的样式控制。

综上所述，使用偶数行选择器需要注意以上的两个问题。做好各种兼容性测试，才能确保偶数行选择器的正确应用。