SSI 包括虚拟 CSS 问题

Question

我有一个 personal site 设置在 apache 上使用 javascript 在家里运行，我现在刚刚开始使用服务器端包含。我有一个样式导航栏，在我的站点根目录中保存为单独的 HTML 文件。此文件中包含一些样式 (CSS)，当包含此导航栏（包含样式）时，该样式将归因于不在 navbar.html 文件中的所有其他内容。代码link here。部分代码如下。

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li.dropdown {
display: inline-block;
}

这是 navbar.html 文件中 CSS 的一小部分，我的许多页面都包含该文件。这意味着导航栏本身的样式（同样，它在同一个 navbar.html 文件中，上面的链接）并且只有它自己。我发现如果我在这些页面上有其他（例如）无序列表，它们也会受到包含但仅用于导航栏的样式的影响。我遇到的另一个问题是这些页面中实际存在的 CSS 正在影响导航栏（例如，here 导航栏中的链接改变了颜色）。

所以，我想我的总体问题是，我如何才能使 SSI 包含与实际页面上的任何其他样式分开？谢谢！

Answer 1

页面上的 CSS（即使是通过包含）会影响该页面上的所有内容。使用更具体的 CSS 选择器 - 为您的导航栏指定一个类或 ID，然后仅定位该类/ID。

<div id="navbar">
    <ul>...</ul>
</div>

#navbar ul { ... }

#navbar li { ... }

等等