html - 如何在 HTML/CSS 中设置某些文本子集的样式？

Question

目前，我正在做这样的事情:

<h2><div class='q'>Q:</div> Does alfredo sauce contain soy?</h2>

然后在我的 CSS 文件中设置样式，如下所示:

.q {
    padding-bottom: 15px;
    display: inline;
    font-size: 35px;
    font-weight: 700;
    color: #65A6D1;
}

虽然这在我的浏览器中显示正常，但当通过 http://validator.w3.org 运行页面时，它会提示:“在此上下文中，元素 div 不允许作为元素 h2 的子元素。(抑制来自该子树的更多错误。)”

我如何在有效的 HTML/CSS 中设置这段文本的样式？

Answer 1

你可以使用跨度

<h2><span class='q'>Q:</span> Does alfredo sauce contain soy?</h2>

同时从类中删除 display: inline

.q {
    padding-bottom: 15px;
    /*display: inline;*/
    font-size: 35px;
    font-weight: 700;
    color: #65A6D1;
}