Question

我正在尝试＆＃34;斑马＆＃34;为我的表行设置颜色（odd = dark，even = light）。但是，由于我的应用程序，用户可以使用选择器隐藏行，因为伪选择器选择了所有内容而不是基于什么＆＃34;可见＆而不会产生斑马效应＃34;

这不是什么新鲜事，之前已多次讨论过：

Select odd even child excluding the hidden child

Zebra striping a table with hidden rows using CSS3?

在同一张桌子中，我使用了CSS＆＃34;＆＃34; count＆＃34;功能，可以显示每行的行号，这些只适用于可见行（丢弃行显示：无）

＆＃13;

table {
  width: 100%;
  background: white;
  counter-reset: rowNumber;
}

tr > td {counter-increment: rowNumber;}
tr td::before {
	content: counter(rowNumber);
	color: blue;
}

tr:nth-child(even) {
  background: red;
}

＆＃13;

<table>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr style="display:none;">
		<td></td>
	</tr>
  <tr>
		<td></td>
	</tr>
  <tr>
		<td></td>
	</tr>
  <tr style="display:none;">
		<td></td>
	</tr>
  <tr>
		<td></td>
	</tr>
</table>

＆＃13;

https://jsfiddle.net/cr6yo00w/1/

我的问题是（在任何地方都没有看到这个问题）：

有没有办法以这种方式将我的桌子和斑马颜色组合在一起？是否可以从计数中提取偶数/奇数？

编辑：这被标记为欺骗 - 正如我已经说明的那样，奇数/偶数选择器之前已经讨论过了。我的问题具体涉及将奇数/偶数选择器与CSS rowNumber计数组合的可能方法。

＆＃34; odd＆＃34;的背景或者＆＃34;甚至＆＃34;行无论display：none

0 个答案: