html - 表交替颜色nth-child:not(.class)

This question already has answers here:

Combining :not() selectors in CSS
                                
                                    （2个答案）
                                
                        
                                3年前关闭。
            
                    
我在一个表中有多个<tr>，其中一些后跟一个<tr class="colapsed">，其中包含一些详细信息。并非所有的<tr>标记都有详细信息。
我需要创建交替的颜色，但忽略折叠的类。我尝试使用table>tbody>tr:nth-child(odd) { background:red }，但它似乎并没有按照我的要求工作。

有任何想法吗？

table>tbody>tr:not(.collapsed):nth-child(odd) {
  background: red
}
.collapsed {
  display: none
}

<table class="rwd-table table-auto doubletr">
  <tbody>
    <tr class="">
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
    <tr class="collapsed">
      <td colspan="7">
        details here
      </td>
    </tr>

    <tr>
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
    <tr class="collapsed">
      <td colspan="7">
        details here
      </td>
    </tr>

    <tr>
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

答案here不能描述我的情况。我正在尝试防止奇数事件考虑所有具有折叠类的标签。

替代分辨率
对于那些处于相同情况的人。
由于:nth-选择器不关心可见性，因此我使用一个简单的jquery函数解决了我的问题。

var n = 1;
$("table>tbody>tr:not('[class*=collapsed]')").each(function() {
  if (n % 2) { //even
    $(this).css("background", "red");
  } else { //odd
    $(this).css("background", "yellow");
  }
  n += 1;
})

最佳答案

考虑到:nth-选择器不关心可见性，我认为这是不可能的。您可以在不需要的内容中使用:not，但是:nth不会在其算法中跳过它。也许这会有所帮助吗？

http://nthmaster.com/

关于html - 表交替颜色nth-child:not(.class)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37006293/