解决！

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文件，一个＆＃34; search-client-table＆＃34; class，和＆＃34; searchResultsTable＆＃34;类。我遇到的问题是searchResultsTable类正在应用于BOTH表。顶部表是应用它的两个类，当它应该只是＆＃34; search-client-table＆＃34;类。只有一个CSS文件，文件中没有重复的类名，并且两个表ID不在CSS文件中的任何位置，它们被用于Jquery目的。此页面上没有其他元素，类名为＆＃34; searchResultsTable＆＃34;，没有其他CSS文件，而Jquery没有提及＆＃34; searchResultsTable＆＃34;在其中，所以我不认为它可能是那样。我很难过。顶级表如何应用第二个表的类？我使用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，他们都做同样的事情。我会看看我是否可以添加一个小提琴，虽然它可能不会发生，无论它是怎么回事......

Edit2：添加了fiddle，但它没有做同样的事情。我知道它不会 - 在我的项目中某处某处存在冲突，但我不知道它可能是什么。另一个CSS文件可以做到，但是没有一个，没有内联CSS可以超越它。春天来了！为什么会这样？从理论上讲，这样的事情可能发生的原因是什么？

解决！

非常感谢下面的Gary McGill解决了这个问题，这真的很愚蠢，我没有意识到这个CSS .searchResultsTable tr，td { border：1px＃c0c0c0 solid; } 适用于所有TD。谢谢大家的回复！

Answer 1

宣言：

.searchResultsTable tr,td { ... }

适用于具有类tr和所有 searchResultsTable元素的元素中的所有td元素。

我认为你的意思是：

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

Answer 2

正如我们所看到的，css类具有相同的定义 {c}中多次重复.search-client-table次。请从css中删除重复的类。我们知道，这不是问题的原因。

我认为其他css必须以某种方式加载适用于第二个表。如果正在加载任何其他css，您可以使用firebug进行检查和确认。

最后，如果仍然没有解决，你可以随时将元素id添加到所有css类中，如下所示，以便css不适用于任何其他表，只适用于第一个表。

#tblSearchChoice.search-client-table {...}

CSS类被应用于没有该类名的元素，任何想法？

解决！

2 个答案: