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；做这个的最好方式是什么？我的第一个想法是，如果有某种变通方法/hack/选择器允许继承父级的所有属性。

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