html - 为什么父项的悬停状态不会改变子项的行高，即使是 "!important"？

Question

当我将鼠标悬停在父 div 上时，尽管设置了 line-height: 3em !important"，子 line-height` 永远不会改变。

此处示例:https://jsfiddle.net/80o088ue/

HTML:

<div class="container">
  <div class="text">
    text
  </div>
</div>

CSS:

.container
{
    position: relative;
    margin-top: 1.25em;
    margin-left: 1em;
    height: 2.125em;
    width: 2.125em;
    float: left;
    border: solid 3px #143a58;
    background-color: #57b7e2;
    -webkit-border-radius: 2.125em;
    -moz-border-radius: 2.125em;
    border-radius: 2.125em;
    overflow: visible;
    cursor: pointer;
}

.container:hover
{
    width: 2.25em;
    height: 2.25em;
    margin-top: 1.1875em;
    margin-left: .9375em;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    line-height: 3em !important;
}

.container .text
{
    position: relative;
    font-family: LatoRegular, Arial, Helvetica;
    font-size: .75em;
    font-weight: bold;
    line-height: 2.833em;
    color: #143a58;
    text-align: center;
}

Answer 1

试试这个:

.container:hover > .text{
  // other css code
  line-height: 3em;
}

通过使用 > 选择器，当您将鼠标悬停在父 .container 元素上时，您的 CSS 规则应该更改 .text 子元素的行高，而不是 .container 本身的行高。