常见页面标题的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）在上述情况下，我必须在页面header.html中的链接属性没有指定样式规则，如何避免该链接的样式将被introduction.html覆盖。

2）我已阅读关于scoped css，它有助于不重写其他页面的样式。但是，在HTML页面中使用所有样式是一种开销，而不是一种好的做法？

3）有没有什么办法可以保护你的html页面（page-header.html）和其他应用程序？在我的情况下，我不希望page-header.html中的任何链接元素（<a href>）暴露给其他页面的样式，例如introductory.html以防止覆盖。

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

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

Answer 1

1. 您可以利用使用“特异性规则”（因为你已经说过：#thisInputElementID VS Div > Input CSS规则）“！重要”和使用（color:red !important;）来设置样式的优先级。 @David Thomas在this SO answer写过很棒的文章。

2. 你是对的范围内的CSS将陷入HTML如果过度使用。 Arley McBlain在其用途和陷阱here上有很好的说明。

3. 为什么不根据一个页面创建CSS样式表？您可以创建一个名为'/pageHeader.css'的样式表，并仅为该特定页面使用该表格。

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

希望这会有所帮助。