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

【问题标题】：CSS class for an HTML Table is affecting another Class Table LayoutHTML 表的 CSS 类正在影响另一个类表布局
【发布时间】：2015-10-07 23:57:22
【问题描述】：

我对弄清楚 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 样式。

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

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

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

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

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

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

【问题讨论】：

请在您的问题中发布完整的代码示例。不要让 jsFiddle 成为它的唯一来源。
尝试在表和类定义之间放置空格。所以：table .mainInfo4col { style here; }
@j08691 添加了 css，所以我的帖子不依赖于 jsFiddle。

标签： css css-selectors

【解决方案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 任何表中的第三个孩子

JSfiddle Demo

【讨论】：

谢谢。你是对的。它已被修复。感谢您的帮助。我只是认为一个 table.mainInfo4Col 会影响两个选择器。我错了。

【解决方案2】：

尽量不要在元素标签（等）上设置样式。对于影响视觉效果的事物，即表示层、颜色、字体……坚持使用类。您可以为元素添加多个类，例如 class="block-style element-style modifier-style"。

    .mainInfo4Col {
    border-top-width : 1px;
    border-right-width : 1px;
    border-bottom-width : 1px;
    border-left-width : 1px;
    border: 1px;
    border-color: #010173;
    border-style : solid solid solid solid;
    width:100%;
    border-collapse: collapse; 
    border-spacing: 1px 1px;
    table-layout: fixed;
}


.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;  
}


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

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

.tableinfo {
    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%;
    }

.tableinfo th, td { padding: 1px; }

.tableinfo:not(tr:first-child) { border-collapse: collapse; border-spacing: 1px 1px;  vertical-align: top;}

【讨论】：