css - 如何正确覆盖外部文件中的 CSS

Question

有很多问题看起来像这个，但没有一个能真正回答我遇到的问题。

我的情况如下:

我需要更改很多元素的显示，以便它们在页面中正确显示并且语义正确。
我有点有js版本和nojs版本。有些元素只有在用户使用 js 时才能看到，而其他元素只有在关闭 js 时才能看到。

我的选择器具有很好的特异性(不要争辩，它们在上下文中确实有意义，我只是更改了这里的类，以免放过原始代码所在的位置)

.imagesContainer div.imageContainer  .imagedata

然后这个元素是为了在用户没有js的时候隐藏。所以我做了类似的事情:

.nojs{
    display:none;
}

我在同一个文件中尝试了它，因为 HTML 期望优先级是外部文件 < 相同文件 < 内联。但现在似乎是外部文件 = 相同文件 < 内联(外部文件和内联之间没有优先级)。

处理这个问题的最佳方法是什么？

更改我展示的第一个选择器的特异性不是解决方案。
我也不想将 CSS 内联。这很痛苦，在标记中占用太多空间并使其更难阅读。
我也不想使用 !important。这被认为不是解决此类问题的正确方法，我同意。
我正在使用 XHTML，所以 DTD 中没有定义 noscript 标签(我需要根据我所遵守的规则使用 XHTML)，

Answer 1

好吧，如果你有一个 display已为 .imagesContainer div.imageContainer .imagedata 设置属性然后简单地添加 nojs由于特殊性，元素不会被覆盖。你必须:

.imagesContainer div.imageContainer .imagedata.nojs { display: none; }

或任何元素nojs被添加到。

如果我是你，我会完全扭转这一局面。对于在没有启用 js 的情况下不显示的元素，我会将它们设置为 display: none默认情况下。然后对于头部中的任何样式/链接或其他脚本，我会使用一些 js 来评估 js到 body或 html元素。然后在 css 中，我将使用 .js <the rest of the selector> 更改显示属性用于要显示的元素。