常见页面标题的 css 样式被其他页面的样式覆盖 - 小部件如何管理？

Question

我有一个页面标题 - 导航栏，比如 page-header.html，它包含在应用程序的所有页面中。标题有一些 CSS 样式。

但有时应用程序内部页面的 css 样式会影响页眉，反之亦然。

我了解特异性规则，您可以将自定义 id 添加到页眉的 css 样式中，例如。

#navigation-bar12345 ul{
color:red;
}

id 是唯一的，因此它有助于不覆盖其他页面的样式并且不被覆盖。

例如，我在 page-header.html 中有一个链接 <a href>，我没有对其应用任何样式。

但是在一个应用程序页面中，比如introduction.html，我已经为链接属性应用了一些特定于页面的样式。

a {
      color:red
  }

考虑到上述情况，我有几个问题：

1) 在上述我没有为page-header.html 中的链接属性指定样式规则的情况下，如何避免链接的样式被introduction.html 覆盖？

2) 我已经阅读了有关作用域 css 的内容，它有助于不覆盖其他页面的样式。但是在 html 页面中包含所有样式是一种开销，而不是一个好习惯？

3) 有什么方法可以保护您的 html 页面（page-header.html）不受您应用程序的其余部分的影响？就我而言，我不希望 page-header.html 中的任何链接元素 (<a href>) 暴露给其他页面的样式，例如 Introduction.html，以防止被覆盖。

4) 好奇的问题 - 我们在页面中包含各种小部件。这些小部件如何管理不操纵其他页面样式或保护自己的样式不被覆盖？

我已经阅读了与此相关的文章和一些堆栈溢出问题，但还没有给我一个清晰的想法。提前感谢您的帮助！

Answer 1

1. 您可以利用“特异性规则”（正如您已经说过的：#thisInputElementID vs Div > Input css 规则）和使用“！important”（color:red !important;）来设置优先级样式。 @David Thomas 在this SO answer 中有很好的文章。

2. 你是对的，如果过度使用，范围内的 css 会阻塞 HTML。 Arley McBlain 有一篇关于其用途和陷阱的很好的文章here。

3. 为什么不只基于一页创建 CSS 样式表？您可以创建一个名为“/pageHeader.css”的样式表，并将该表仅用于该特定页面。

4. 我不确定您指的是哪些小部件，但我可以假设如果您查看他们的 css，您会看到答案 1 的组合。这会锁定他们的元素并消除可能影响的任何歧义非小部件元素。

希望这会有所帮助。