Fatal编程技术网
  • css/
  • 什么是合适的css选择器；在x和y之间；？

什么是合适的css选择器；在x和y之间；？

css

什么是合适的css选择器；在x和y之间；？,css,css-selectors,Css,Css Selectors,假设我有一个包含20行和3列的HTML表。（20x3） 我想把7到12之间的那一行漆成红色 什么是适合它的CSS选择器？如何定义“介于”之间？有一种方法可以使用CSS 2.1选择器来实现，它看起来有点凌乱，但很容易理解。因此： /* First set of colours, from 1 - 6 */ table tr td { background-color: #00f; } /* From the 7th row onwards, different colour */ table t

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

我想把7到12之间的那一行漆成红色

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

有一种方法可以使用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; }
工作示例：

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

有一种方法可以使用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; }
工作示例：

我之所以使用2.1选择器而不是css3选择器，比如
nth child
，是因为在较旧的浏览器中有更好的支持，尤其是IE 8。

我相信这是可能的

nth-child(n+7):nth-child(-n+12)
这是一个非常有趣和有用的资源：

只是一个想法，伪代码-选择第7行及以上并设置样式，然后选择第12行及以上并去掉添加到第7行及以上的样式

tr:nth-child(n+7) {...some style...}
tr:nth-child(n+12) {...negate that style...}
我相信是的

nth-child(n+7):nth-child(-n+12)
这是一个非常有趣和有用的资源：

只是一个想法，伪代码-选择第7行及以上并设置样式，然后选择第12行及以上并去掉添加到第7行及以上的样式

tr:nth-child(n+7) {...some style...}
tr:nth-child(n+12) {...negate that style...}
下面的示例使用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>


表tr:n个子项（n+3）：n个子项（-n+5）{
背景色：#FF3366；
}
1.11.21.3
2.12.22.3
3.13.23.3
4.14.24.3
5.15.25.3
6.16.26.3
7.17.27.3
8.18.28.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>


表tr:n个子项（n+3）：n个子项（-n+5）{
背景色：#FF3366；
}
1.11.21.3
2.12.22.3
3.13.23.3
4.14.24.3
5.15.25.3
6.16.26.3
7.17.27.3
8.18.28.3

tr:nth child（7n+4）
应该起作用
tr:nth child（7n+4）
应该起作用吗？反过来说，
n+6
规则将否定
n+12
，以便将前6个否定返回到默认样式？我刚刚对我的第2个代码片段进行了快速测试。（第一个单行选择器工作正常。）我相信逻辑是第一个规则影响上面的每个tr，包括第七个实例。第二条规则选择上面的每个tr，包括第十二个tr。我想你的问题可能是关于css def的顺序。如果你重新排列你的台词，结果可能会不同，或者如果你包括！重要规则。只是一个想法。
n+6
规则会否定
n+12
规则，从而将前6个否定返回到默认样式。我刚刚对第2个代码片段进行了快速测试。（第一个单行选择器工作正常。）我相信逻辑是第一个规则影响上面的每个tr，包括第七个实例。第二条规则选择上面的每个tr，包括第十二个tr。我想你的问题可能是关于css def的顺序。如果你重新排列你的台词，结果可能会不同，或者如果你包括！重要规则。只是一个想法。