减少CSS代码表的多个css定义

Question

我有大约100个表在我的网站上，唯一的方式访问他们与css是与ID的那些。

代码如下：

.tablepress-id-1 .row-1 td {
background-color: #ffffff;
color: #666666;
}
.tablepress-id-1 .row-2 td {
    background-color: #6666cc;
    color: #ffffff;
}
.tablepress-id-1 .row-3 td {
    background-color: #ffffff;
    color: #666666;
}
.tablepress-id-1 .row-4 td {
    background-color: #cccccc;
    color: #ffffff;
}
.tablepress-id-1 .row-5 td {
    background-color: #ffffff;
    color: #666666;
}
.tablepress-id-1 .row-6 td {
    background-color: #cccccc;
    color: #ffffff;
}
.tablepress-id-1 .row-7 td {
    background-color: #ffffff;
    color: #666666;
}
.tablepress-id-1 .row-8 td {
    background-color: #cccccc;
    color: #ffffff;
}
.tablepress-id-1 .row-9 td {
    background-color: #ffffff;
    color: #666666;
}
.tablepress-id-1 .row-10 td {
    background-color: #cccccc;
    color: #ffffff;
}
.tablepress-id-1 .row-11 td {
    background-color: #ffffff;
    color: #666666;
}
.tablepress-id-1 .row-12 td {
    background-color: #cccccc;
    color: #ffffff;
}
.tablepress-id-1 .row-13 td {
    background-color: #ffffff;
    color: #666666;
}

/* Widget TablePress [table id=2 /] */

.tablepress-id-2 tbody td {
    font-size: 14px;
    color: #666666;
}

.tablepress-id-2 .row-1 td {
    background-color: #ffffff;
    color: #666666;
}
.tablepress-id-2 .row-2 td {
    background-color: #6666cc;
    color: #ffffff;
}
.tablepress-id-2 .row-3 td {
    background-color: #ffffff;
    color: #666666;
}
.tablepress-id-2 .row-4 td {
    background-color: #cccccc;
    color: #ffffff;
}
.tablepress-id-2 .row-5 td {
    background-color: #ffffff;
    color: #666666;
}
.tablepress-id-2 .row-6 td {
    background-color: #cccccc;
    color: #ffffff;
}
.tablepress-id-2 .row-7 td {
    background-color: #ffffff;
    color: #666666;
}
.tablepress-id-2 .row-8 td {
    background-color: #cccccc;
    color: #ffffff;
}

有没有办法减少密码..。每个表看起来都是相同的，并且id是增量的..tablepress id-1...tablepress id-100

有什么好主意吗？

谢谢

更新：

代码：

thead td {
    font-size: 14px;
    color: #666666;
    background-color: #000099;
}
/* Stuff you care about */
[class^="tablepress-id-"] tr:nth-child(even) {
  background-color: #FFF;
  color: #666;
}
[class^="tablepress-id-"] tr:nth-child(odd) {
  background-color: #6666cc;
  color: #FFF;
}

​

​

这就是它应该是什么样的目标：

​

​

Answer 1

<style type="text/css">
    .table{
        width:100%; 
        border-collapse:collapse; 
    }
    .table td{ 
        padding:7px; border:#4e95f4 1px solid;
    }
    .table tr{
        background: #b8d1f3;
    }
    .table tr:nth-child(odd){ 
        background: #b8d1f3;
    }
    .table tr:nth-child(even){
        background: #dae5f4;
    }
</style>

<table class="table">
    <tr><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>Text</td><td>Text</td><td>Text</td></tr>
</table>

Answer 2

看起来你是想“斑马条纹”行。如果是这样的话，你可以把它减少到这样的程度：

​

/* You may or may not need this */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

/* Stuff you care about */
[class^="tablepress-id-"] tr:nth-child(even) {
  background-color: #FFF;
  color: #666;
}
[class^="tablepress-id-"] tr:nth-child(odd) {
  background-color: #CCC;
  color: #FFF;
}

<table class="tablepress-id-1">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

​

我注意到，第二行不同于其他，但似乎是唯一的区别，在其他正常的斑马条纹效应。不确定这是否是选中的/突出显示的行或什么，但以下是几种实现这一目标的方法。

​

/* You may or may not need this */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

/* Stuff you care about */
[class^="tablepress-id-"] tr:nth-child(even) {
  background-color: #FFF;
  color: #666;
}
[class^="tablepress-id-"] tr:nth-child(odd) {
  background-color: #CCC;
  color: #FFF;
}
/* This rule should come after the other two, using the cascade in CSS */
[class^="tablepress-id-"] tr:nth-child(2) {
  background-color: #66C;
  color: #FFF;
}
/* or as a class to apply to a specific row */
[class^="tablepress-id-"] tr.row-highlight {
  background-color: #66C;
  color: #FFF;
}

<table class="tablepress-id-1">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr class="row-highlight">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

​