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。谢谢大家的回复!

【问题讨论】:

可以分享searchResultsTablecss类吗? 能否请您为此创建一个小提琴并分享,以便我们真正了解可能导致问题的原因。 你所描述的是不可能的,所以原因是别的。如果没有演示该问题的演示,您的西装就会很冷。 【参考方案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类被应用于没有该类名的元素,有啥想法吗?的主要内容,如果未能解决你的问题,请参考以下文章

CSS 中的类名“英雄”从何而来?

有啥方法可以通过 selenium 获取元素的类名

有没有办法让 HTML 代码独立于 CSS 类名的变化?

c#在定义一个类时,public static class 类名;public class 类名;class 类名,这3个有啥不同吗?

JAVA中定义为static变量的时候,该变量有啥意义吗?

从jQuery中的多个相同的类名中获取值CSS