HTML 表的 CSS 类正在影响另一个类表布局

Question

我对弄清 CSS 的怪癖还很陌生。我承认，我是新手。

我有以下 HTML:点击here对于 JSFiddle

<table class="mainInfo4Col">
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>        
</tr>
<tr>
    <td>5</td>
    <td><input></td>
    <td>7</td>
    <td>8</td>        
</tr>    
</table>        
<table class="tableinfo">
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>        
</tr>
<tr>
    <td>5</td>
    <td></td>
    <td>7</td>
    <td>8</td>        
  </tr>    
</table>

<style>
table {
    font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-size:8pt;
    background-color: #F0F0F0;
    border-color: #0b23b5;
    color: #06187F;
    border-top-width : 1px;
            border-right-width : 1px;
            border-bottom-width : 1px;
            border-left-width : 1px;
            border-color: #010173;
            border-style : solid solid solid solid;
            width:100%;
        }
        th {
            font-family: Verdana, Arial, Helvetica, Sans-serif;
            font-size:8pt;
            color: #06187F;
            text-transform : uppercase;
        }
        td {
            padding: 1px;
        }
        table.mainInfo4Col {
            border-spacing: 1px 1px;
            table-layout: fixed;
            border-collapse: collapse;
            border-spacing: 1px 1px;
        }
        .mainInfo4Col tr:nth-child(odd) {
            background-color: #F2F1F1;
            font-family: Verdana, Arial, Helvetica, Sans-serif;
            font-size: 8pt;
            color: #010173;
            height:20pt;
            border-collapse: collapse;
            border-spacing: 1px 1px;
        }
        .mainInfo4Col tr:nth-child(even) {
            background-color: #DAE1E8;
            font-family: Verdana, Arial, Helvetica, Sans-serif;
            font-size: 8pt;
            color: #010173;
            height:20pt;
            border-collapse: collapse;
            border-spacing: 1px 1px;
        }
        table.mainInfo4Col td:nth-child(1), td:nth-child(3) {
            padding: 1px;
            text-align: right;
            white-space:nowrap;
            width: 25%;
        }
        table.mainInfo4Col td:nth-child(2), td:nth-child(4) {
            padding: 1px;
            text-align: left;
            white-space:nowrap;
            width: 25%;
        }
        table.tableinfo {
            border-spacing: 3px 3px;
            table-layout: inherit;
            border-collapse: collapse;
        }
        table.tableinfo th, td {
           padding: 1px;
        }
        table.tableinfo table:not(tr:first-child) {
           border-collapse: collapse;
           border-spacing: 1px 1px;
           vertical-align: top;
         }
     </style>

*EDIT 添加了 CSS STYLE。

我的css是为一个普通的非类表定义的，.mainInfo4Col表，.tableinfo表。但是，似乎我编写 CSS 定义的方式，.mainInfo4Col 类正在影响 .tableinfo 的外观。

例如，.mainInfo4Col 应该是唯一具有已定义文本对齐方式的表格。但是，另一个表类一旦呈现就具有类似的行为。

我试过用 table.class 或 .class 表定义我的 css，没有任何区别。我也尝试过使用不同的选择器进行定义。

我想也许我应该使用“>”，因为它只接受父子关系但没有成功。 .

任何提示，不胜感激。最终目标是让 .mainInfo4Col 类具有不同的奇数行和偶数行颜色，并用自己的特征定义偶数和奇数 tds。

而 .tableinfo 应该有自己的定义。遗憾的是，.mainInfo4Col 与 .tableinfo 类的文本对齐方式冲突。谢谢。

Answer 1

你有一些像这样的规则集:

table.mainInfo4Col td:nth-child(1), td:nth-child(3) {
    padding: 1px;
    text-align: right;
    white-space:nowrap;
    width: 25%;
}

我怀疑你需要它们是这样的:

table.mainInfo4Col td:nth-child(1), 
table.mainInfo4Col td:nth-child(3) {
    padding: 1px;
    text-align: right;
    white-space:nowrap;
    width: 25%;
}

这个

td:nth-child(3) {
        padding: 1px;
        text-align: right;
        white-space:nowrap;
        width: 25%;
    }

正在影响所有td，它们是任何表中的第三个 child

JSfiddle Demo