1

假设我有一个包含 20 行和 3 列的 HTML 表格。(20x3)

我想将 7 到 12 之间的行涂成红色。

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

4

3 回答 3

3

我相信它可能是

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...}
于 2013-11-14T02:18:32.693 回答
2

有一种方法可以使用 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/

我之所以会使用 2.1 选择器而不是 CSS 3 选择器，nth-child是因为旧浏览器有更好的支持，尤其是 IE 8。

于 2013-11-14T02:17:12.173 回答
1

下面的示例使用 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>
于 2013-11-14T02:58:58.353 回答