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

规则还可以，但如果在进一步开发中我必须添加一些东西：悬停但仅限于它，例如。填充：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.
    }
}

较少嵌套的规则获得父属性

1 个答案: