使用CSS在悬停时更改跨度的颜色

时间:2015-08-05 14:32:05

标签: html5 css3

我知道更改span的颜色属性的正确语法是什么,但我无法重现此行为,我不知道为什么

这是HTML代码:

<div class="col-lg-3 col-md-3 col-sm-6 btn">

                    <table class="table panelc" id="panelc">
                        <tbody>
                            <tr>
                              <td>
                                <span class="bpost-parcellocker" style="color: #EF2637; font-size: 90px; "></span>

                              </td>
                              <td class="text-center text-nowrap">
                                Vanaf<br>€4,00
                              </td>
                            </tr>
                            <tr>
                                <td>
                                Een pakjesautomaat
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>


            </div>

CSS:

.table.panelc:hover, .table.panelc:hover span  {
    background-color: #EF2637;
    color: white;
 }

只会更改表格的内容而不会更改范围的颜色,为什么?我做了几次尝试,选择器是正确的。

确实如果我试图改变跨度的背景一切正常

2 个答案:

答案 0 :(得分:1)

这是因为内联样式的特异性高于你的css中的特异性。

在此处阅读有关CSS特异性的更多信息:http://cssspecificity.com/

答案 1 :(得分:0)

如果您希望您的内联样式执行如下操作:

.table.panelc:hover, .table.panelc:hover span  {
  background-color: #EF2637;
  color: white !important;
}