CSS类被应用于没有该类名的元素,有啥想法吗?
Posted
技术标签:
【中文标题】CSS类被应用于没有该类名的元素,有啥想法吗?【英文标题】:CSS class being applied to element without that class name, any ideas?CSS类被应用于没有该类名的元素,有什么想法吗? 【发布时间】:2016-03-15 23:47:07 【问题描述】:我有以下 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,它们都做同样的事情。我会看看我是否可以添加一个小提琴,尽管它可能不会发生,不管发生了什么......
Edit2:添加了一个fiddle,但它并没有在那里做同样的事情。我知道它不会——在我的项目中一定存在某种冲突,但我不知道它可能是什么。另一个 CSS 文件可以做到这一点,但没有,没有内联 CSS 可以超越它。啊!为什么会这样?从理论上讲,发生这种情况的可能原因是什么?
解决了!
非常感谢下面的 Gary McGill 解决了这个问题,真的很愚蠢,我没有意识到这个 CSS .searchResultsTable tr,td 边框:1px #c0c0c0 实心; 适用于所有 TD。谢谢大家的回复!
【问题讨论】:
可以分享searchResultsTable
css类吗?
能否请您为此创建一个小提琴并分享,以便我们真正了解可能导致问题的原因。
你所描述的是不可能的,所以原因是别的。如果没有演示该问题的演示,您的西装就会很冷。
【参考方案1】:
声明:
.searchResultsTable tr,td ...
适用于具有searchResultsTable
类的元素中的所有tr
元素,以及所有 td
元素。
我想你的意思是:
.searchResultsTable tr, .searchResultsTable td ...
【讨论】:
刚刚试过,100%正确,非常感谢。我不敢相信这是这么愚蠢的事情。你是个传奇!我会支持你,但我的代表不存在(新成员) @ailinmcc666 您大概仍然可以接受答案 - 这将为您赢得一些声誉。【参考方案2】:正如我们所见,具有相同定义的 css 类与
.search-client-table
在 css 中重复多次。请从 css 中删除重复的类。正如我们所知,这不是问题的原因。
我认为其他 css 必须以某种方式加载,这适用于第二个表。您可以通过 firebug 检查并确认是否正在加载任何其他 css。
最后,如果仍然无法解决,您可以随时将元素 id 添加到所有 css 类中,如下所示,以便 css 不适用于任何其他表,但仅适用于第一个表。
#tblSearchChoice.search-client-table ...
【讨论】:
使用萤火虫检查过,肯定有其他 CSS 正在加载。这就是为什么它如此令人困惑! 如果您有此页面的实时网址,请粘贴到此处以便我进行调试。 我没有,抱歉。上面的一个用户解决了这个问题,我在 CSS 中做的事情真的很愚蠢。 是的,我看到了,即使我很惊讶,为什么我没有看到它。以上是关于CSS类被应用于没有该类名的元素,有啥想法吗?的主要内容,如果未能解决你的问题,请参考以下文章
c#在定义一个类时,public static class 类名;public class 类名;class 类名,这3个有啥不同吗?