css - 当我有内联样式时，CSS 中的悬停属性不起作用

Question

我正在处理一个 HTML 文档，我想将 hover 属性用于 HTML: div 元素，但它不起作用。这里是 HTML div 和我使用的 CSS 样式

<div style="opacity: 0.8; background-color: #559FED; width: 600px; margin: 0 auto; border-radius: 0px 100px;">
   <p style="font-size: 4em; font-family: verdana; font-weight: blod; text-align: center; color: rgba(112,79,196,1); text-shadow: 5px 5px 2px #000; padding: 10px;"> Special Effects</p>
</div>

以及内部 CSS 样式 CSS:

div:hover {background-color: red;}

但直到我从 div 元素中删除样式并在内部样式中创建一个 HTML 元素选择器，它才起作用，如下所示:

    div {opacity: 0.8; background-color: #559FED; width: 600px; margin: 0 auto; border-radius: 0px 100px;}
    div:hover {background-color: red;}

然后它成功了，但是谁能告诉我为什么第一次没有成功？

Answer 1

内联样式具有最高优先级。如果需要在CSS中覆盖，需要使用!important

div:hover {background-color: red !important;}