Question

我有一些HTML标记＆amp; css样式将嵌入数千个不同的网站。我希望此部分仅使用我自己的样式表，而忽略原始网站的CSS。

除了为所有类和id使用唯一的前缀之外，有没有办法不在某个区域应用网站范围的CSS规则，只使用我自己的样式？

Answer 1

用户CSS中的FYI !important声明将始终胜过CSS作者和用户代理（资源：the cascade on Sitepoint），但这不是您竞争的对象 with。

完全忽略页面的其余部分afaik（CSS中的C是有原因的; ））。但是，这里有一堆应该有用的东西：

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

不要忘记可能适用于客户网站的媒体查询中的声明：您（或您的客户）在调整浏览器大小之前不会看到它们。
我非常关心在一般规则中没有太多特异性，然后在默认解决方案中没有特定规则，但在给定项目的最后一个MQ（320或1600+）中，我不再关心它是否＆＃ 39;对我来说更方便（即更快）因为我知道我以后不需要覆盖它。如初。

编辑：不要忘记考虑假:before和:after。 Normalize.css现在声明*, *:before, *:after { (-prefix-)box-sizing: border-box }，如果您也使用它们，这可能会令人惊讶。最好不要使用它们，因为它们不能在样式属性中设置样式（与MQ相同的问题）为了消灭这些伪可能具有的任何风格，这段代码：

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

应该足够了：没有内容，没有伪 / EDIT

如果您对您的项目非常认真（成千上万个网站，哇），您还可以自动测试客户网站上的CSS申请情况，测试验证：

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

嵌入式内容的独特样式表

1 个答案: