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

本文关键字：元素 任何想 应用 CSS | 更新日期: 2023-09-27 18:26:21

我有以下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文件，其中包含一个reachtable类、一个"searchclienttable"类和一个"searchResultsTable"类。我遇到的问题是searchResultsTable类被应用于BOTH表。最上面的表将两个类都应用于它，而它应该只是"搜索客户端表"类。只有一个CSS文件，文件中没有类名的重复，并且这两个表ID不在CSS文件中的任何位置，它们用于Jquery目的。这个页面上没有其他元素的类名为"searchResultsTable"，也没有其他CSS文件，Jquery中也没有提到"searchResultsStable"，所以我认为不可能是这样。我被难住了。第一张表是如何应用第二张表的类的？我使用的是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，它们都做同样的事情。我会看看我是否可以加一把小提琴，尽管这可能不会发生，不管发生了什么。

第二版：加了一把小提琴，但它在那里的作用不一样。我知道不会-我的项目中肯定有冲突，但我不知道会是什么。另一个CSS文件会做这件事，但没有，没有内联CSS可以凌驾于它之上。AHHH！为什么会发生这种情况？从理论上讲，发生这种事情的可能原因是什么？

解决了

非常感谢下面的Gary McGill，他解决了这个问题，这真的很愚蠢，我没有意识到这个CSS.searchResults表tr，td{边框：1px#c0c0c0实心；}适用于所有TD。感谢大家的回复！

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

声明：

.searchResultsTable tr,td { ... }

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

我想你的意思是：

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

正如我们所看到的，具有相同定义的css类与CCD_ 4在css中被重复多次。请从css中删除重复的类。正如我们所知，这不是问题的原因。

我认为其他css一定是以某种方式加载的，这适用于第二个表。您可以使用firebug检查并确认是否正在加载任何其他css。

最后，如果这仍然不能解决，您可以像下面这样将元素id添加到所有css类中，这样css就不会应用于任何其他表，而只应用于第一个表。

#tblSearchChoice.search-client-table {...}
相关文章：