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中，作者可能不会使用ap标签，如果我只将样式应用于父级，则全局或其他段落样式将超过样式父母。我通常也会使用锚标记颜色做同样的事情。有时我可以使用我的后端代码强制执行标记，但我对纯粹的样式体系结构的解决方案更感兴趣。

其他人做什么？这是一个糟糕的策略吗？到目前为止，上述造型对我来说是最可靠的。

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

Answer 2

你能安全地假设作者（或任何所见即所得）将插入一个元素吗？无论是p还是div, span, blockquote, article, main, section基本上是最常用的包含文本的元素。

有几种选择：

确保输出始终进入具有id和/或类的容器（使其更难以覆盖样式）。
确保WYSIWYG编辑器（如果使用的话）只输出少量可控元素
要求作者只使用少数元素

无论如何，还没有很多HTML元素可供选择。

CSS：

.description,
.description p,
.description span,
.description td,
.description article,
.description main,
.description blockquote,
.description section,
.description any_selector_here,
.description div {
    font-family: $LatoLight;
    color: white;
    font-size: 16px;
    line-height: 1.25;
}

这样你只会写一次你的风格。

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

2 个答案: