SSI 包括虚拟 CSS 问题

Question

我有一个personal site set up running on apache with javascript at home and am just now starting with Server Side Includes. I have a styled navigation bar saved as a separate HTML file in the root of my site. Within this file is some Style (CSS) and, when including this navbar (with style included), the style is attributed to everything else that is not within the navbar.html file. Code 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 文件中，link 上面）并且只是它自己。我发现如果我在这些页面上有其他（例如）无序列表，它们也会受到包含但仅用于导航栏的样式的影响。我遇到的另一个问题是 CSS 实际上在那些页面中影响了导航栏（例如 here 导航栏中的 links 改变了颜色）。

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

Answer 1

页面上的

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

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

#navbar ul { ... }

#navbar li { ... }

等等

SSI 包括虚拟 CSS 问题

SSI include virtual CSS problems

css

html

apache

ssi