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

发布于 2024-12-06 23:44:36 字数 507 浏览 0 评论 0原文

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

<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?

Currently, I'm doing something like this:

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

and then styling it in my CSS file, like so:

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

While this displays fine in my browser, when running the page through http://validator.w3.org, it complains: "Element div not allowed as child of element h2 in this context. (Suppressing further errors from this subtree.)"

How would I style this piece of text in valid HTML/CSS?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

ㄟ。诗瑗 2024-12-13 23:44:36

您可以使用跨度

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

You can use a span

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

also remove display: inline from the class

.q {
    padding-bottom: 15px;
    /*display: inline;*/
    font-size: 35px;
    font-weight: 700;
    color: #65A6D1;
}
相权↑美人 2024-12-13 23:44:36

在 h2 内使用 span 而不是 div。

Use a span instead of a div inside the h2.

橪书 2024-12-13 23:44:36

使用 标记而不是

是内联元素,而

是块元素。

Use the <span> tag instead of <div>. <span> is an inline element, while <div> is a block element.

绝不放开 2024-12-13 23:44:36

div 创建一个新的块元素。这些在 h2 和许多其他元素中是被禁止的。您可以使用 span 创建内联元素。

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

当然,您需要相应地更改样式表。

A div creates a new block element. These are forbidden in h2 and many other elements. You can create an inline element with span.

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

Of course, you need to change the stylesheet accordingly.

两相知 2024-12-13 23:44:36

你可以这样做:

<h2 id="q"><span>Q</span>Does alfredo sauce contain soy?</h2>

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

}

You can do this:

<h2 id="q"><span>Q</span>Does alfredo sauce contain soy?</h2>

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

}
开始看清了 2024-12-13 23:44:36

divh2 都是块元素。使用 span 而不是 div

例如:

<h2><span class="q">Q:</span> Blammy blammo soy?</h2>

附加说明:【非规范描述】有些元素不喜欢包含块元素。标头(h1、h2、...)元素不喜欢包含块元素。 “不喜欢”:我相信规范说“不应该”。

div and h2 are both block elements. Use span instead of div.

For example:

<h2><span class="q">Q:</span> Blammy blammo soy?</h2>

additional note: [Non-normative description] Some elements don't like to contain block elements. The header (h1, h2, ...) elements don't like to contain block elements. "Don't like": the spec says "should not" I believe.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文