css - SSI 包含虚拟 CSS 问题

Question

我有一个 personal site设置在家里使用 javascript 在 apache 上运行，我现在才开始使用服务器端包含。我在网站的根目录中有一个样式化的导航栏，另存为一个单独的 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 { ... }

等等