css - 嵌套较少的规则获取父属性

Question

您好，我想知道是否可以用更少的时间做这样的事情。我有这个CSS：

.parent{display: block; color: red; border: yellow 1px solid;}
.parent a, .parent a.special-link{color: blue; border-color: green;}

我会少这样写：

.parent{
    display: block; 
    color: red; 
    border: yellow 1px solid;

    a, a.special-link{
        color: blue; border-color: green;
    }
}

规则还可以，但是如果在进一步开发中我必须添加一些东西到 :hover 但只是为了它，例如。填充：20px；做这个的最好方式是什么？我的第一个想法是，如果有某种解决方法/黑客/选择器允许继承父级的所有属性。

Answer 1

我怀疑我清楚地了解您的确切需求（“：悬停”什么？“仅”为什么“它”？）但总的来说，它通常是这样的：

.parent {
    display: block;
    color:   red;
    border:  yellow 1px solid;

    a {
        // <a> properties:
        // ...

        &, &.special-link {
            // <a> and <a.special-link> properties:
            // ...
            color:        blue;
            border-color: green;
        }

        &.special-link {
            // <a.special-link> properties:
            // ...
        }

        &:hover {
            // <a:hover> properties:
            // ...
        }

        /// etc. etc. etc.
    }
}