Question

我有两个样式表和一个html页面。我可以在页面中心的div中使用其中一个样式表吗？我想这样做，因为两种风格都有不同的h1，h2，th等设置。

Answer 1

这将允许您有一个<style>元素（不是<link>到外部样式表），只适用于部分文档。

浏览器支持很弱（我的最新统计数据来自Sep 2011 when there was zero support），所以这几乎肯定对你不实用。

通常的解决方案是使用单个样式表。将文档的部分包含在带有id的元素中，并在具有descendant combinator的选择器中使用该ID，以覆盖更宽文档中的所有适用样式。

h1 { 
    color: red;
}

#mySection h1 {
    color: black;
}

Answer 2

特异性将决定哪一个优先。如果您选择走这条路线，您可以添加类来区分H1或其他风格。

但是，您通过HTTP加载两个CSS文档也会受到性能影响。

就个人而言，我会在一个文档中按类来计算我的风格。例如：

h1 {
    color:orange;
}

.style1 h1 {
    font-size: 600%;
    color: red;
}

.style2 h1 {
    font-size: 20%;
    color: yellow;
}

关键是保持简单。想想如果你的网站变得非常庞大，你的方法将在多长时间内保持可维护性。

Answer 3

例如，如果您有以下内容，则可以访问标题：

<div class="example">
    <h1>Fancy headline</h1>
</div>

您可以使用.example h1 {...}这样的样式来仅为该标题指定特定样式。多数民众赞成在css级联;）

Answer 4

而不是尝试指定HTML的哪个部分会使用哪个样式表在样式表中更具体，这样您就不会遇到样式冲突。实施例;

HTML：

<div id="a">
    <div class="b">
        <h1>c</h1>
    </div>

    <h1>d</h1>
</div>

CSS：

#a h1 {
    /* style */
}

#a .b h1 {
    /* another style */
}

Answer 5

您可以根据需要使用任意数量的样式表。但最好将所有样式合并到一个工作表中，这样您的页面就不必从Web服务器请求多个文件。

但更重要的是：如何在页面上以不同方式设置相同的元素？

有两种方法：

1）使用class或id。如果你有一个标记<h2 class='regular'>和<h2 class='highlight'>，那么你可以用不同的方式设置它们。

.regular {
color: #000000;
}
.highlight {
color: #0000ff;
}

2）你也可以根据与其他元素的关联来设计东西。例如，如果您的页面结构是：

<body>
    <div class='lvl-one'>
        <p class='lvl-two'></p>
    </div>
</body>

您可以定位<p class='lvl-two'>，甚至不需要class，如下所示：

div p {
    font-size:24px;
}

PS。您的页面上不应该有多个h1标记 - 这对SEO不利。