Question

我有一个包含50个条目的表格，其中一些条目有一个＆＃39;事件＆＃39;或者＆＃39;评论。＆＃39;表格行条目如下所示：

活动，评论，活动，评论，评论，评论，活动

我想要做的是交替＆＃39;事件＆＃39;的行颜色。并且评论＆＃39;类名分开。目前我所拥有的是：

tr.event:nth-child(odd) {
    background-color: #000;
}
tr.comment:nth-child(odd) {
    background-color: #000;
}

使用此代码，我得到一个输出：

黑色（事件），白色（评论），黑色（事件），白色（评论），黑色（评论），白色（评论），黑色（事件）

我希望输出为：

黑色（事件），黑色（评论），白色（事件），白色（评论），黑色（评论），白色（评论），黑色（事件）

任何帮助都会很棒！

Answer 1

我认为纯css是不可能的。

可以在此处找到对同一问题的非常好的回复：Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

我建议的是：为每个奇数元素添加一个新类，并相应地设置一个。

所以你会有

.comment
.event
.comment.odd
.event.odd
.event
.event.odd
.comment

等

否则，您可以使用js来完成。但额外的类方法应该足够好。

Answer 2

您尝试使用非分层HTML结构表示基本上是分层数据。 nth-child指的是其父级中的子级，而不是所有具有某个共享类的子级。所以基本上，你不能在CSS中做到这一点。

如果可以的话，尝试按照这样构建HTML：

<div>

  <div class="event">
    <div class="comment"></div>
  </div>

  <div class="event">
    <div class="comment"></div>
    <div class="comment"></div>
    <div class="comment"></div>
  </div>

  <div class="event">
  </div>

</div>

现在您可以使用

设置此样式

.event:nth-child(odd)    { color: white; }
.event:nth-child(even)   { color: black; }
.comment:nth-child(odd)  { color: white; }
.comment:nth-child(even) { color: black; }

由于您似乎想要使用与其所属事件相同的颜色启动注释，您需要执行以下操作：

.event:nth-child(odd) { color: white; }
.event:nth-child(odd) .comment:nth-child(odd) { color: white; }
.event:nth-child(odd) .comment:nth-child(even) { color: black; }

.event:nth-child(even) { color: black; }
.event:nth-child(even) .comment:nth-child(odd) { color: black; }
.event:nth-child(even) .comment:nth-child(even) { color: white; }

以上使用div个元素。但是如果你真的想用表格做这个，你可以尝试使用下面的HTML，然后使用与上面相同的逻辑：

<table>

  <thead><tr><td>Event</td></tr></thead>
  <tbody>
    <tr><td>Comment</td></tr>
  </tbody>

  <thead <tr><td>Event</td></tr></thead>
  <tbody>
    <tr><td>Comment</td></tr>
    <tr><td>Comment</td></tr>
    <tr><td>Comment</td></tr>
  </tbody>

  <thead><tr><td>Event</td></tr></thead>

</table>

然后写：

thead:nth-of-type(odd) { color: white; }
tbody:nth-of-type(even) tr:nth-child(odd) { color: white; }
tbody:nth-of-type(odd)  tr:nth-child(event) { color: black; }

thead:nth-of-type(even) { color: black; }
tbody:nth-of-type(even) tr:nth-child(odd) { color: black; }
tbody:nth-of-type(odd)  tr:nth-child(event) { color: white; }

Answer 3

使用纯CSS是不可能的，你必须使用jQuery来添加一个类（或者如果你愿意，可以直接添加样式）。

jQuery的索引开始为0，所以它甚至考虑，我们认为是奇数。

我已添加绿色，以便您可以查看单元格中的内容。

＆＃13;

$('table').each(function() {
  $('tr.comment:even').addClass('odd');
  $('tr.event:even').addClass('odd');
});

＆＃13;

tr.comment.odd {
  background-color: #000;
}

tr.event.odd {
  background-color: #000;
}

table {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="event">
    <td>event</td>
  </tr>
  <tr class="comment">
    <td>comment</td>
  </tr>
  <tr class="event">
    <td>event</td>
  </tr>
  <tr class="comment">
    <td>comment</td>
  </tr>
  <tr class="comment">
    <td>comment</td>
  </tr>
  <tr class="comment">
    <td>comment</td>
  </tr>
  <tr class="event">
    <td>event</td>
  </tr>
</table>

＆＃13;

一个表

3 个答案: