html - html中的两个css文件具有不同的设置

Question

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

score 1 · Accepted Answer

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

浏览器支持很弱（我拥有的最新统计数据来自2011 年 9 月，当时支持为零），所以这对你来说几乎肯定不实用。

通常的解决方案是使用单个样式表。用 an 将文档的部分包裹在一个元素中，id并在选择器中使用该 id 和后代组合器来覆盖更广泛文档中的所有适用样式。

h1 { 
    color: red;
}

#mySection h1 {
    color: black;
}

score 0 · Accepted Answer

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

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

您可以使用 .example h1 {...} 之类的样式来仅为该标题指定特定样式。这就是css中的级联；）

score 0 · Accepted Answer

与其尝试指定 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 */
}

score 0 · Accepted Answer

特异性将决定哪一个优先。如果您选择走那条路，您可以添加类以区分 H1 的一种风格或另一种风格。

但是，通过 HTTP 加载两个 CSS 文档也会对性能造成影响。

就个人而言，我会在一份文件中按班级制定我的风格。例如：

h1 {
    color:orange;
}

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

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

关键是保持简单。想想如果您的网站变得非常庞大，您的方法在长期内的可维护性如何。

score -1 · Accepted Answer

您可以使用任意数量的样式表。但最好将所有样式组合到一张表中，这样您的页面就不必从网络服务器请求多个文件。

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

几种方法：

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 不利。

5 回答 5