html - 如何防止 HTML 元素成为 CSS 规则的目标？

Question

这是我要解决的一个难题。我正在客户页面内开发滚动界面。基本上，我无法更改客户端页面中已有的文档类型、周围元素和样式表或脚本，我必须让我的小代码块“适合”其中。这对于 Web 开发人员来说很常见。 现在棘手的部分是我的 block 中的一些 img 元素实际上是继承客户端样式表中的 CSS 规则的目标(当然，我无法删除或更改)。解释为什么在这种情况下我实际上不能自己使用更具体的 CSS 规则来弥补这一点会太长，但这是事实。所以我的问题是:除了创建另一个规则或删除规则之外，是否有办法防止 HTML 元素成为 CSS 规则的目标？困难在于像

这样的规则

.containter1 .containter3 { ... }

将以内部元素为目标:

<div class="container1">
   <div class="containter2">
      <div class="containter3">Element
      ...

页面内的元素不会成为 CSS 规则的“墙”，CSS 规则会“跳过”容器到达目标元素。所以像

这样的规则

img { ... }

将定位任何 img 标签。我知道的唯一补偿方法是针对要保护的精确 img 创建一个更具体的 CSS 规则。但我不能在这里这样做。有没有一种方法可以在不创建 CSS 规则的情况下仅通过添加 HTML 来获得相同的结果？

/* 编辑以澄清*/

我知道 CSS 规则、特异性、继承等。我的问题更务实。考虑这个例子来澄清问题:想象你有一个你不能触摸的客户样式表，它定义了以下一般规则:

img { display:none; }

问题是你不能设置相应的通用规则来做相反的事情，比如:

img { display:not-none; }

因为没有什么是相反的。 "none" 的反义词可以是 "inline"、"block"、"inline-block" , 等等。

基本上，这意味着第一个通用规则强制您为页面中的每个 img 显式定义 display 属性。这很糟糕。所以我试图找到一个 hack 来解决这种情况(相信我，我的实际问题甚至比这更糟糕，但这个例子解释起来更清晰也更快)。

Answer 1

如果你说你想在不更改任何代码的情况下阻止定位，那么不，这显然是不可能的。

内联样式总是覆盖样式表规则(除非它们使用 !important 标记，否则您也需要使用它)。

您应该能够使用您最喜欢的 CSS 重置中的语法来重置您需要的任何元素。以下是一些选项:

http://www.cssreset.com/

所以，像 -

<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>

是您最好的选择。