html - 如何设计父元素和文本元素之间的级联字体样式关系

Question

这是一件非常基本的事情，但对我来说总是很奇怪。我为内容管理系统开发网站，我不能总是可靠地期望内容作者使用正确的标记。很多时候，他们甚至不知道什么是 p 标签。

假设我有一个描述元素，它应该以某种方式设置样式，与我的全局段落样式分开。它里面是文本，最好是在段落标签中，但谁知道呢，也许不会。为了解决这个问题，我将样式同时添加到父级和段落标记中:

.description {
        font-family: $LatoLight;
        color: white;
        font-size: 16px;
        line-height: 1.25;

        p {
            font-family: $LatoLight;
            color: white;
            font-size: 16px;
            line-height: 1.25;
        }
    }

这似乎是重复和矫枉过正，但如果我只将样式添加到 p，作者可能不会使用 p 标签，如果我只将样式应用于父级，则全局或其他段落样式将取代样式 parent 。我通常也会对 anchor 标签颜色做同样的事情。有时我可以用我的后端代码强制执行标记，但我真的对纯样式架构的解决方案更感兴趣。

其他人做什么？这是一个糟糕的策略吗？迄今为止，上述样式对我来说是最可靠的。

Answer 1

你可以试试这个:

.description {
    font-family: $LatoLight;
    color: white;
    font-size: 16px;
    line-height: 1.25;

    *{
        font-family: inherit;
        color: inherit;
        font-size: inherit;
        line-height: inherit;
    }
}