如何设置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>

还删除显示:从类内联

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