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 文件，其中包含一个用于到达表的类、一个“search-client-table”类和一个“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 ，尽管它可能不会发生，无论发生了什么......

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

解决了!

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

Answer 1

声明:

.searchResultsTable tr,td { ... }

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

我想你的意思是:

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