悬停、活动、焦点状态是否继承值？答案

【问题标题】：Does hover, active, focus states inherit values?悬停、活动、焦点状态是否继承值？
【发布时间】：2012-04-28 14:53:14
【问题描述】：

我只是想知道如果您不更改值，hover、active 和 focus 会自动从标准 a 标签继承设置吗？

例如：

.wrapper .left .main .row .holder .more a,
#content .wrapper .left .main .row .holder .more a:visited
{
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    height: 23px;
    min-height: 23px;
    max-height: 23px;
    display: block;
    margin: 0px auto;
    background: #fff url(../images/more-info-btn.png) top left no-repeat;
}

#content .wrapper .left .main .row .holder .more a:hover {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    height: 23px;
    min-height: 23px;
    max-height: 23px;  
    display: block;
    margin: 0px auto;
    background: #fff url(../images/more-info-btn.png) bottom left no-repeat;
}

下面会做同样的事情吗？

#content .wrapper .left .main .row .holder .more a,
#content .wrapper .left .main .row .holder .more a:visited
{
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    height: 23px;
    min-height: 23px;
    max-height: 23px;
    display: block;
    margin: 0px auto;
    background: #fff url(../images/more-info-btn.png) top left no-repeat;
}

#content .wrapper .left .main .row .holder .more a:hover {
    background: #fff url(../images/more-info-btn.png) bottom left no-repeat;
}

【问题讨论】：

它们并不完全“继承”这些值，因为 CSS 中的继承是指从父元素获取样式。相反，这些值是级联的，或者取自一般的a 规则（我知道这很令人困惑）。不过，您在这里的想法是正确的。

标签： css hyperlink focus hover

【解决方案1】：

是的，没错，伪状态继承了值。

为了保持一致性，最好只在伪状态规则中声明要更改的样式。

使用以下代码，文本将始终为font-size:1.9em，padding-top:10px 无论:hover 状态如何：

a
{
    color:red;
    font-size:1.9em;
    padding-top:10px;
}

a:hover
{
    color:green;
}

-- SEE EXAMPLE --

【讨论】：

【解决方案2】：

不，因为其中一种状态的a 元素仍然是a 元素，并且元素不能从自身继承。但任何以a 作为选择器的设置都适用于元素处于其中一种状态时。

因此，当您希望某些属性应用于所有状态的a 元素时，使用a 选择器设置它们就足够了。

从技术上讲，由于选择器的差异会影响特异性，因此您问题中的两组规则并不等效。这很重要的情况很少见，并且在应用的其他样式表中会涉及相当特殊的规则。

【讨论】：