javascript - 无法使用 CSS 更改表格中文本的颜色

Question

我想将颜色样式添加到<div>中标签。

这仅在使用属性时有效:

`background-color`: orange;

但我希望它应该只更改文本，而不是背景。

像这样:

`color`: orange;

在此演示中，不需要 Javascript 仍然可以工作。

我的演示在这里:

function firefoxFix() {
  
    if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
        
        var tds = document.getElementsByTagName( 'td' );
        
        for( var index = 0; index < tds.length; index++ ) {
            tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';                     
        };
        
        var style = '<style>'
            + 'td { padding: 0 !important; }' 
            + 'td:hover::before, td:hover::after { background-color: transparent !important; }'
            + '</style>';
        document.head.insertAdjacentHTML( 'beforeEnd', style );
        
    };
    
};

firefoxFix();

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::after,
.ff-fix:hover::after { 
    background-color: orange;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

<table>
<tbody>

    <tr>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>

    <tr>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>

    <tr>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>

    <tr>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
  </tbody>
</table>

谢谢。

Answer 1

我认为更好的方法是当用户使用 Firefox 时向 html 元素添加类。您可以为此使用匿名函数，例如:

(函数(html) { if (/firefox/.test( window.navigator.userAgent.toLowerCase() ) ) { html.classList.add('is-firefox'); } })(document.documentElement);

然后你可以为该类添加 css:

.is-firefox td { 颜色为橙色; }

工作中jsFiddle 。在 Chrome 54 和 Firefox 45 中测试。

您也可以尝试此 css 修复而不使用任何 javascript，如下所示:

@-moz-document url-prefix() { TD { 颜色为橙色; } }

这里有一些有关 CSS hack 的更多信息: https://www.wired.com/2010/02/browser-specific_css_hacks/