即使使用「！important」，爲什麼父母的懸停狀態不會改變孩子的線高？

當我將鼠標懸停在父div上時，儘管設置爲line-height: 3em !important", the child，但行高不會改變。即使使用「！important」，爲什麼父母的懸停狀態不會改變孩子的線高？

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; 
}

來源

2016-08-11 Don Rhummy

你能澄清你的問題嗎？你想改變文本類的行高嗎？ –

，因爲您重寫默認的父行高度，該行高度應該由「.text」用此「line-height：2.833em;」繼承。..也......「line-height：3em！important」僅適用於父母自從你明確添加了爲孩子提到的行高的規則。 – repzero

默認情況下，行高被設置爲繼承（從其父元素繼承行高）。但是，您將它設置爲2.833em，因此不再設置爲從其父項繼承。 – joshhunt

試試這個：

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

通過使用>選擇，你的CSS規則應該改變的行高.text子元素當您懸停父容器.container元素時，而不是.container本身的行高。

來源

2016-08-11 23:39:41

東陽.text已經在類的屬性line-height: 2.833em;，它將覆蓋，通過來自父line-height級聯。爲了解決這個問題，只是懸停（demo）改變了line-height的.text：

.container:hover .text { 
    line-height: 3em; 
}

來源

2016-08-11 23:36:12

即使使用「！important」，爲什麼父母的懸停狀態不會改變孩子的線高？

回答

相關問題