html - 嵌入内容的独特样式表

Question

我有一些 html 标记和 css 样式，它们将被嵌入到数千个不同的网站中。我希望此部分仅使用我自己的样式表，而忽略原始站点的 css。

除了为所有类和 ID 使用唯一前缀之外，有没有办法不在特定区域应用站点范围的 css 规则，而只使用我自己的样式？

Answer 1

仅供引用 !important 用户 CSS 中的声明将始终胜过 CSS Author 和 User Agent(资源:the cascade on Sitepoint)，但这不是您要竞争的与。

没有办法仅应用您的 CSS 而完全忽略页面的其余部分，afaik(CSS 中的 C 是有原因的 ;))。但是，这里有一些应该有所帮助的东西:

• !important 非常强大。只有其他带有此修饰符的声明才有机会被应用
• 内联样式也是如此(不确定它是否符合那些可怕的 HTML 电子邮件的需要)
• id 具有很强的特异性。具有 412 个类且没有 id 的选择器比具有 1 个 id 且没有类的选择器具有更低的特异性(这就是为什么根据 OOCSS 和基于它的 css linters，这是一种不好的做法。Ymmv)
• .c.c { prop:val}<​​ 允许人为地增加 CSS 特殊性的一个好技巧:两倍于 .c {} 的特殊性和完全相同的范围。想象一下 id ;)(你也可以在一个元素的每个祖先上都有一个 id，但你不能在同一个元素上有 2 个 id)
• initial和 unset如果 IE 支持它就好了……会更好:all属性，但它是 IE11+ 而不是在 Safari 中
• 因此您必须仔细阅读 MDN 以了解每个要重置的属性并应用其默认值。或者在 SO 上阅读这个关于相关问题的惊人的答案:https://stackoverflow.com/a/18464285/137626

不要忘记可能适用于客户网站的媒体查询中的声明:您(或您的客户)在他们调整浏览器大小之前不会看到它们。
我非常关心在一般规则中没有太多的特异性，然后在默认分辨率中没有太多的特异性，但是在给定元素的最后一个 MQ(320 或 1600+)中，我真的不再关心它是否更方便对我来说(即更快)，因为我确信我以后不需要覆盖它。曾经。

编辑:不要忘记考虑伪 :before 和 :after。 Normalize.css 现在声明 *, *:before, *:after { (-prefix-)box-sizing: border-box } 如果你也使用它们，那可能会令人惊讶。恕我直言，最好不要使用它们，因为它们不能在样式属性中设置样式(与 MQ 相同的问题)。
要消灭这些伪造者可能具有的任何样式，请使用以下代码:

high-specificity-selector *:before,
high-specificity-selector *:after {
  content: none !important
}

应该够了:无内容，无伪。
/编辑

如果您非常认真地对待您的元素(成千上万的网站，哇)，您还可以在野外自动测试应用在客户网站上的 CSS，并通过测试验证:

• 小部件的一堆元素的一堆属性的 CSS 值。资源:http://csste.st/tools/
• 与teh 强大的初始屏幕截图相比，您的小部件的呈现 PhantomCSS (基于 CasperJS，本身基于 PhantomJS。Casper 在 WebKit 中进行测试，但在 Gecko/SlimerJS 或 IE/TrifleJS 中有克隆测试)