更改 td 项的边框颜色失败，尝试 css 和 jquery答案

【问题标题】：Change the border color of a td item fails, tried css and jquery更改 td 项的边框颜色失败，尝试 css 和 jquery
【发布时间】：2015-05-07 14:22:03
【问题描述】：

我正在使用 WordPress 插件来生成成员概览。效果很好，但我想更改行之间的分隔线。

遗憾的是，没有一个类应用于每一行。

生成的 HTML 代码如下所示：

<tr id="Dentista" class="wowclass-1">
    <td style="vertical-align:middle;padding:10px">4</td>
    <td style="vertical-align:middle;padding:10px">Dentista</td>
    <td style="vertical-align:middle;padding:10px">100</td>
    <td style="vertical-align:middle;padding:10px">Warrior</td>
    <td style="vertical-align:middle;padding:10px">4</td>
</tr>

每个 td 都自带一个边框，如下所示：

table.wow-armory-table, .wow-armory-table td {
  border-bottom: 1px solid #4c4c4c!important;
}

但是我尝试更改此边框颜色的任何操作都失败了，我尝试添加 CSS，但我想它不会显示，因为 CSS 中的静态 !important。

也试过 Jquery：

<script>
    $(document).ready(function(){
        $('table.wow-armory-table').css(["border-bottom: 1px solid black !important;"]);
    });
</script>

Link to the site

这里有人知道如何解决它吗？我只是想改变线条的颜色。

【问题讨论】：

原来的 CSS 确实包含相当多的!importants。糟糕的设计。看看你是否可以至少摆脱其中一些，那么你就不需要任何自己的!important。
我没有保存我所有的 CSS 尝试，但它是这样尝试的： td{ border-bottom: 1px solid black !important; }
看起来插件实际上是在将style 标签注入到您的 HTML 中（而不是页面底部的 head...more 。这表明边框样式应该是插件本身内部的设置。
@pr0b 等等，你在正文的末尾有一个样式块。先更正一下。
@MrLister 实际上有两个 IIRC...我不支持 WP 但插件会注入这样的style 标签吗？似乎效率低下。

标签： jquery html css

【解决方案1】：

您正在使用 CSS 文件和最后覆盖所有内容的内联 CSS。

<style>a.wowclass-1 {color: #C79C6E!important}a.wowclass-2 {color: #F58CBA!important}a.wowclass-3 {color: #ABD473!important}a.wowclass-4 {color: #FFF569!important}a.wowclass-5 {color: #FFFFFF!important}a.wowclass-6 {color: #C41F3B!important}a.wowclass-7 {color: #0070DE!important}a.wowclass-8 {color: #69CCF0!important}a.wowclass-9 {color: #9482C9!important}a.wowclass-10 {color: #00FF96!important}a.wowclass-11 {color: #FF7D0A!important}</style><style>.wow-armory-table .wowclass-1 {color: #C79C6E}.wow-armory-table .wowclass-2 {color: #F58CBA}.wow-armory-table .wowclass-3 {color: #ABD473}.wow-armory-table .wowclass-4 {color: #FFF569}.wow-armory-table .wowclass-5 {color: #FFFFFF}.wow-armory-table .wowclass-6 {color: #C41F3B}.wow-armory-table .wowclass-7 {color: #0070DE}.wow-armory-table .wowclass-8 {color: #69CCF0}.wow-armory-table .wowclass-9 {color: #9482C9}.wow-armory-table .wowclass-10 {color: #00FF96}.wow-armory-table .wowclass-11 {color: #FF7D0A}table.dataTable tr.odd {background-color: #202020}table.dataTable tr.even {background-color: #3b3b3b}table.dataTable tr.odd td.sorting_1 {background-color: #202020}table.dataTable tr.even td.sorting_1 {background-color: #3b3b3b}table.wow-armory-table , .wow-armory-table td {border-bottom: 1px solid #4c4c4c!important;}.characters-by-class-container hr {background-color: #0a0a0a;}</style>

你需要改变

 wow-armory-table td {border-bottom: 1px solid #4c4c4c!important;}

到这里

 wow-armory-table td {border-bottom: 1px solid #000;}

另外，您不应该像现在这样使用!important。如果您按顺序加载正确的 CSS，则应该没有问题。

因为您在内联 CSS 中将其列为 !important，所以您将无法使用 jQuery 或您的 CSS 文件覆盖它。

【讨论】：

遗憾的是我无法访问 css 文件，css 和 html 代码是由 wordpress 插件生成的。
那么问题仍然存在。因此，您似乎需要确定为什么 wordpress 将 !important 放在所有内容上并解决该问题。然后你可以改变颜色。

【解决方案2】：

试试

<script>
    $(document).ready(function(){
        $('.wow-armory-table td').css(["border-bottom: 1px solid black !important;"]);
    });
</script>

或者只是添加

.wow-armory-table td {
    border-bottom: 1px solid black !important;
}

到你的CSS。

【讨论】：

【解决方案3】：

如果您使用 wordpress，则首先添加一个插件 CUSTOM CSS 并将您的 CSS 放入其中，它将覆盖现有的 css。或者可能是您的主题具有内置的自定义 css 功能。

 table.wow-armory-table, .wow-armory-table td {
     border-bottom: 1px solid #4c4c4c!important;
}

我希望这能解决您的问题。

【讨论】：