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

Question

我正在使用 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都自带一个border，看起来是这样的:

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

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

还尝试了 Jquery:

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

Link to the site

这里有没有人知道如何修复它？我只想更改线条的颜色。

Answer 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 文件覆盖它。