Question

我只是想知道您是否不更改值，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;
}

Answer 1

是的，这是正确的，伪状态继承了值。

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

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

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

a:hover
{
    color:green;
}

-- SEE EXAMPLE --

Answer 2

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

因此，当您希望某些属性应用于所有状态中的a元素时，只需使用a选择器设置它们即可。

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

悬停，活动，焦点状态是否继承值？

2 个答案: