Question

假设我有一个包含20行和3列的HTML表。（20X3）

我想将7到12之间的行绘制为红色。

适合它的CSS选择器是什么？我如何定义“之间”？

Answer 1

使用CSS 2.1选择器有一种方法可以做到这一点，这看起来有点凌乱，但很容易理解。所以：

/* First set of colours, from 1 - 6 */
table tr td { background-color: #00f; }

/* From the 7th row onwards, different colour */
table tr + tr + tr + tr + tr + tr + tr td { background-color: #f00; }

/* From the 13th row onwards, change it back to the first colour */
table tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr td { background-color: #00f; }

工作示例：http://jsfiddle.net/pY3wS/

我之所以在CSS 3选择器（如nth-child）上使用2.1选择器的原因是因为在旧版浏览器中有更好的支持，尤其是IE 8。

Answer 2

我相信它可能是

nth-child(n+7):nth-child(-n+12)

这是一个非常有趣且有用的资源：http://nthmaster.com/

只是一个想法，伪代码 - 选择第7行及以上的行并对其进行样式设置，然后选择第12行及以上的行并删除您添加到第7行及以上的样式。

tr:nth-child(n+7) {...some style...}
tr:nth-child(n+12) {...negate that style...}

Answer 3

以下示例使用css：

在表格中绘制红色行3到5

<html>
<head>
<style>
table tr:nth-child(n+3):nth-child(-n+5) {
  background-color:  #FF3366;
}
</style>
</head>
<body>
  <table border="1">
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
    <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
    <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
    <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
    <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
    <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
    <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
  </table>
</body>
</html>

什么是“x和y之间”的正确css选择器？

3 个答案: