css - 样式化 HTML5 元素

Question

我知道为 <section> 设置样式是不正确的标签，但是 <header> 怎么样？和 <footer>标签。如果使用这些标签提供了更语义化的标记，那么应该使用它们，但是，如果它们不能被设置样式，那么 <div>仍然需要插入标签内以包装内容并设置样式。

我知道<header>可以设置样式，但我不确定这样做是否正确。

所以问题是:html5 标签应该设置样式还是应该 <div>放在里面以照顾造型？

Answer 1

规范中没有任何内容表明您不能或不应该为 <section> 或 <article> 等 HTML5 元素设置样式。它只是说你不应该将语义 HTML5 元素放置在某处“为了”的样式。请改用 <div>。

因此，如果您有语义原因要在某处添加 <section> 或 <article>，那么一定要添加它并且也可以随意设置它的样式。但是，如果出于样式目的(例如，添加边框或向左浮动等)而必须包装标记的一部分，但该部分在标记中没有任何语义意义，则使用 <div> .

例如:

<div class="mainBox">
    <nav class="breadcrumbs">
        <ol>
            <li>...list of links (snip)....</li>
        </ol>
    </nav>

    <section>
        <h1>Latest Tweets From Twitter</h1>

        <article>
            //... a Tweet (snip)... //
        </article>

        <article>
            //... a Tweet (snip)... //
        </article>

        //... lots more Twitter posts (snip)... //

    </section>

</div>

<section> 元素是您页面的主要部分(即您的推文列表)，并且在开头还有一个必需的标题。但它被包裹在一个 div.mainBox 元素中，因为你可能想在面包屑和部分部分周围包裹一个边框，即。这纯粹是为了造型。但是也没有什么可以阻止您对 <section> 和 <article> 元素进行样式设置。