Question

我知道更改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;
 }

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

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

Answer 1

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

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

Answer 2

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

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

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

2 个答案: