c# - CSS 类应用于没有该类名的元素，有什么想法吗？

Question

我有以下 HTML:

<table id="tblSearchChoice" class="search-client-table">
    <tr>
        <td><strong>Filter Search</strong></td>
        <td>@Html.DropDownListFor(model => model.Option,
                 new SelectList(Model.SearchOptions, "Value", "Text", Model.Option), "Please Select"</td>
    </tr>
</table>

<table id="clientResults" class="searchResultsTable">
    <thead>
         <tr>
             <th style="text-align: center">ID</th>
             <th style="text-align: left">Name</th>
             <th>Address</th>
             <th>Last Delivery</th>
             <th>Next Delivery</th>
         </tr>
    </thead>
    <tbody>
          @foreach (ClientDetailsViewModel client in Model.Clients)
          {
              @Html.Partial("_SearchDetailsRow", client)
          }
     </tbody>
</table>

没什么复杂的。我有一个 CSS 文件，其中包含一个用于到达表的类、一个“搜索客户端表”类和一个“searchResultsTable”类。我遇到的问题是 searchResultsTable 类被应用于两个表。顶层表正在应用两个类，而它应该只是“search-client-table”类。只有一个 CSS 文件，文件中没有重复的类名，并且两个表 ID 不在 CSS 文件中的任何位置，它们用于 Jquery 目的。此页面上没有其他类名为“searchResultsTable”的元素，没有其他 CSS 文件，而且 Jquery 中也没有提及“searchResultsTable”，所以我认为这不可能。我很难过。那个顶层表如何应用第二个表的类？我正在使用 C#、MVC 4、Visual Studio 2012，以防相关。这是相关的 CSS，以防它也相关。

.search-client-table {
    background-color: #337AB7;
    border-top: 3px solid #00B5C6;
    border-bottom: 3px solid #00B5C6;
}

.search-client-table td {
    color: #ffffff;
    background-color: #337AB7;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
}

.search-client-table input {
    color: #000000;
    font-weight: normal;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.searchResultsTable {
    border: 1px #c0c0c0 solid;
    background-color: #ffffff;
    color: #000000;
    width: 950px;
}


.searchResultsTable th {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    background-color: #00B5C6;
    color: #ffffff;
}

 .searchResultsTable tr,td {
   border: 1px #c0c0c0 solid;
}

.searchResultsTable td label {
    text-align: left;
    padding-left: 10px;
    font-weight: normal;
     border: 1px #c0c0c0 solid;
}

.searchResultsTable .email a {
    color: #FFFFFF;
}

    .searchResultsTable .email a:hover {
        text-decoration: underline;
    }

    .searchResultsTable .email a:visited {
        color: #FFFFFF;
    }

    .searchResultsTable .email a:hover:visited {
        text-decoration: underline;
    }

我想不出是什么原因造成的，我已经尝试清除浏览器缓存、清理和重建解决方案。我不知所措，任何人都知道什么会导致这样的事情，或者任何人都可以指出正确的方向来进一步调查这个问题吗？谢谢。

编辑:抱歉，复制相同的 CSS 两次，而不是添加 searchResultsTable。添加它。我用过 IE、Chrome 和 Firefox，它们都做同样的事情。我会看看我是否可以添加一个 fiddle ，虽然它可能不会发生，不管发生了什么......

Edit2:添加了一个 fiddle ，但它并没有在那里做同样的事情。我知道它不会 - 我的元素中某处一定存在冲突，但我不知道它可能是什么。另一个 CSS 文件可以做到这一点，但没有一个，没有可以覆盖它的内联 CSS。啊!为什么会这样？从理论上讲，发生这种情况的可能原因是什么？

已解决!

非常感谢下面的 Gary McGill 解决了这个问题，真的很愚蠢，我没有意识到这个 CSS .searchResultsTable tr,td { 边框:1px #c0c0c0 实心； }正在申请所有 TD。谢谢大家的回复!

Answer 1

声明:

.searchResultsTable tr,td { ... }

适用于 searchResultsTable 类元素中的所有 tr 元素，以及所有 td 元素。

我想你的意思是:

.searchResultsTable tr, .searchResultsTable td { ... }