公共页面标题的css样式被其他页面样式覆盖 - 窗口小部件如何管理？

Question

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

但有时候应用程序内部页面的CSS样式会影响页面标题，反之亦然。

我理解特异性规则，并且您可以为页面标题的css样式添加自定义ID，例如。

#navigation-bar12345 ul{
color:red;
}

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

但是比如说，我在page-header.html中有一个链接<a href>我还没有应用任何样式。

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

a {
      color:red
  }

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

1）在上面的例子中，我没有为page-header.html中的link属性指定样式规则，如何避免lead.html覆盖链接的样式？

2）我读过有关作用域的CSS，它有助于不覆盖其他页面的样式。但是在html页面中拥有所有样式是一个开销而不是一个好的做法？

3）有什么方法可以保护你的html页面（page-header.html）与你的应用程序的其他部分保持一致吗？就我而言，我不希望pageg header.html中的任何链接元素（<a href>）暴露给其他页面的样式，例如introduction.html，以防止覆盖。

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

我已经阅读了与此相关的文章和几个堆栈溢出问题，但没有任何东西给我一个明确的想法。在此先感谢您的帮助！

Answer 1

1. 您可以利用“特异性规则”（正如您已经说明的那样：#thisInputElementID vs Div > Input css规则）和'！important'的使用（{{1} }）设置样式的优先级。 @David Thomas在this SO answer写了很多文章。

2. 你是对的，如果过度使用，范围内的CSS会使HTML陷入困境。 Arley McBlain对其使用和陷阱here有很好的评论。

3. 为什么不仅基于一个页面创建CSS样式表？您可以创建一个名为“color:red !important;”的样式表，并仅将该表用于该特定页面。

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

希望这有帮助。