Question

我想在桌子排（myrow）上应用甚至奇怪的风格。但它只采用奇数行的颜色。

.myrow, .myrow:nth-of-type(odd) + .myrow:nth-of-type(even) ~ .myrow:nth-of-type(odd) {
   background: #f8f8f8;;     
}

.myrow:nth-child(even),.myrow:nth-child(even) ~ .myrow:nth-of-type(odd), 
.myrow:nth-child(even) + .myrow:nth-child(odd) ~ .myrow:nth-of-type(even){ 
   background: blue; 
}

<table class="col-xs-12 col-sm-12 col-md-12 col-lg-12 main-table "> 
<ng-container *ngFor="let r of results">
  <tr class="myrow">
     <div class="row>
         <div class="col-xs-12 col-sm-12 col-md-11 col-lg-11">
          <table class="wd-100 bus-table">
              <tr></tr>
          </table>
         </div>
     </div
  </tr>
</ng-container>
</table>

Answer 1

试试这段代码

nth-child(even) css

＆＃13;

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table tr:nth-child(even) {
  background: blue;
}

table tr:nth-child(odd) {
  background: #f8f8f8;
}

table tr:hover {
  background-color: #ddd;
}

＆＃13;

<table class="col-xs-12 col-sm-12 col-md-12 col-lg-12 main-table ">
  <ng-container *ngFor="let r of results">
    <tr class="myrow">
      <div class="row">
        <div class=" col-xs-12 col-sm-12 col-md-11 col-lg-11 ">
          <table class="wd-100 bus-table ">
            <tr>
              <td>a</td>
              <td>b</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
            </tr>
          </table>
        </div>
      </div>
    </tr>
  </ng-container>
</table>

＆＃13;

Answer 2

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table tr.myrow:nth-child(even) {
  background: blue;
}

table tr.myrow:nth-child(odd) {
  background: #f8f8f8;
}

table tr.myrow:hover {
  background-color: #ddd;
}

CSS表格甚至样式

2 个答案: