如何设置HTML / CSS中某些文本的子集？

Question

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?

Answer 1

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

Answer 2

在h2中使用span而不是div。

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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;

}