Question

我正在尝试将仅css斑马条纹样式应用于表格，但前提是它只有2行以上。

这只能用css吗？ IE9及以上版本是必需的 - 所有css3选择器都很好。

到目前为止，这是我想出来的，但我不是那里......

Should have Zebra:
<div class="select">
  <table>
    <tr class="clickable">
      <td>row 1</td>
    </tr>
    <tr class="clickable">
      <td>row 2</td>
    </tr>
    <tr class="clickable">
      <td>row 3</td>
    </tr>
    <tr class="clickable">
      <td>row 4</td>
    </tr>
    <tr class="clickable">
      <td>row 5</td>
    </tr>
    <tr class="clickable">
      <td>row 6</td>
    </tr>
  </table>
</div>
<hr>
Should have Zebra:
<div class="select">
  <table>
    <tr class="clickable">
      <td>row 1</td>
    </tr>
    <tr class="clickable">
      <td>row 2</td>
    </tr>
    <tr class="clickable">
      <td>row 3</td>
    </tr>
  </table>
</div>
<hr> Since only 2 elements: shouldnt have Zebra
<div class="select">
  <table>
    <tr class="clickable">
      <td>row 1a</td>
    </tr>
    <tr class="clickable">
      <td>row 2a</td>
    </tr>
  </table>
</div>

CSS：

.clickable:nth-child(odd):not(:nth-last-child(2)) {
  background: rgba(230, 230, 230, 1);
  color: red;
}

.clickable:nth-child(even):not(:nth-last-child(1)) {
  background: rgba(180, 180, 180, 1);
}

http://codepen.io/anon/pen/zqEWYO

Answer 1

您可以使用CSS Quantity Queries。

只需添加：

<interfaces>
    <interface name="management">
        <inet-address value="${jboss.bind.address.management:127.0.0.1}"/>
    </interface>
    <interface name="public">
        <inet-address value="${jboss.bind.address:127.0.0.1}"/>
    </interface>
    <!-- TODO - only show this if the jacorb subsystem is added  -->
    <interface name="unsecure">
        <!--
          ~  Used for IIOP sockets in the standard configuration.
          ~                  To secure JacORB you need to setup SSL 
          -->
        <inet-address value="${jboss.bind.address.unsecure:127.0.0.1}"/>
    </interface>
</interfaces>

Example on Codepen

或者，只有当有3个元素时才能应用样式：

Example on Codepen

Answer 2

您也可以选择（同时增加选择器重量）：

/* single tr being first and last */
table tr.clickable:nth-child(odd):first-child:last-child ,
/* last being right after first */  
table tr.clickable:nth-child(odd):first-child +  tr.clickable:nth-child(even):last-child ,
/* first being right before last */
table tr.clickable:nth-child(odd):first-child:nth-last-child(2) {
  background:none;
  color:gray;
}

codepen fork

＆＃13;

table tr.clickable:nth-child(odd) {
  background: rgba(230, 230, 230, 1);
  color: red;
}

table tr.clickable:nth-child(even) {
  background: rgba(180, 180, 180, 1);
}

table tr.clickable:nth-child(odd):first-child:last-child,
table tr.clickable:nth-child(odd):first-child +  tr.clickable:nth-child(even):last-child,
table tr.clickable:nth-child(odd):first-child:nth-last-child(2) {
  background:none;
  color:gray;
}

＆＃13;

Should have Zebra:
<div class="select">
  <table>
    <tr class="clickable">
      <td>row 1</td>
    </tr>
    <tr class="clickable">
      <td>row 2</td>
    </tr>
    <tr class="clickable">
      <td>row 3</td>
    </tr>
    <tr class="clickable">
      <td>row 4</td>
    </tr>
    <tr class="clickable">
      <td>row 5</td>
    </tr>
    <tr class="clickable">
      <td>row 6</td>
    </tr>
  </table>
</div>
<hr>
Should have Zebra:
<div class="select">
  <table>
    <tr class="clickable">
      <td>row 1</td>
    </tr>
    <tr class="clickable">
      <td>row 2</td>
    </tr>
    <tr class="clickable">
      <td>row 3</td>
    </tr>
  </table>
</div>
<hr> Since only 2 elements: shouldnt have Zebra
<div class="select">
  <table>
    <tr class="clickable">
      <td>row 1a</td>
    </tr>
    <tr class="clickable">
      <td>row 2a</td>
    </tr>
  </table>
</div>
<hr> Since only 1 element: shouldnt have Zebra Css rules
<div class="select">
  <table>
    <tr class="clickable">
      <td>row 1a</td>
    </tr>
  </table>
</div>

＆＃13;

纯CSS - 斑马条纹表只有超过2行

2 个答案: