如何防止 HTML 元素被 CSS 规则定位？答案

【问题标题】：How to prevent a HTML element from being targeted by a CSS rule?如何防止 HTML 元素被 CSS 规则定位？
【发布时间】：2012-11-04 06:38:24
【问题描述】：

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

这样的规则

.containter1 .containter3 { ... }

将针对内部的一个元素：

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

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

这样的规则

img { ... }

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

/* 编辑澄清*/

我知道 CSS 规则、特异性、继承等。我的问题更务实。考虑这个例子来澄清问题：假设您有一个您无法触摸的客户样式表，它定义了以下一般规则：

img { display:none; }

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

img { display:not-none; }

因为没有与没有相反的东西。 "none" 的反义词可以是"inline"、"block"、"inline-block" 等等。

所以基本上，这意味着第一个通用规则强制您为页面中的每个img 显式定义display 属性。这很糟糕。所以我试图找到一个技巧来解决这样的情况（我的实际问题比这更糟糕，相信我，但这个例子更清晰，更容易解释）。

【问题讨论】：

您可以使用通过 html 写入文档的内联样式。或者您可以编写一个小脚本来更改文档加载时的 css 值。
你是说你不能添加任何CSS？或者您只是不能添加自己/编辑已经可用的 CSS 文件？
html 中没有通用的“不要被 X 类型的规则作为目标”之类的东西。您能否编辑您的问题并向我们展示您试图避免匹配的特定选择器？
如果您要在页面上插入代码，我不明白您为什么不能编写更具体的 CSS 来弥补。我知道你说解释太长了，但是……你可以吗？
除非您可以在客户页面上给您的空间中插入 iframe，否则您将不得不重置所有受影响的元素。

标签： html css inheritance css-selectors css-specificity

【解决方案1】：

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

内联样式总是优先于样式表规则（除非它们使用 !important 标记，否则您也需要使用它）。

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

http://www.cssreset.com/

所以，像 -

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

是你最好的选择。

【讨论】：

我无法访问元素本身（JS 生成），所以我需要以更通用的方式“保护”它们，这正是我问这个“棘手”问题的原因。我对其进行了编辑以澄清。谢谢
看起来你正在处理一个非常糟糕的基本页面设置，这很糟糕。 “简单的通用解决方案”和“格式错误的标记”很少一起玩得很好，由于级联，CSS 在这方面比其他东西更差。祝你好运。
你没有得到它。我的客户是一家大型国际公司。他们要求为所有网站提供 JS 滚动条。没有“错误的基本页面设置”。他们只是在容器上制定了通用规则，而我实际上是在这个容器内工作。我在问一个明确的理论问题。不尝试处理“格式错误的标记”。这不是重点。但是感谢您的宝贵时间。

【解决方案2】：

您可以更改特定元素的 CSS 的唯一方法是修改现有样式或创建更具体的新样式并且会重载其他样式。

我必须让我的小代码块“适合”其中。

一旦你做了一些代码块，你可以像这样将样式标签放在那个 HTML 代码块中，例如：

<div id="block_of_code_available_for_modification">
   <style type="text/css">
       //css code which will fix styles of your content without influencing other elements on a page.
   </style>
</div>

或者，如果你只有几个元素需要修复样式，你可以使用 HTML 元素的style 属性（一旦你可以设置修改 HTML，你总是可以添加类似下面的东西......好吧，与添加样式标签相同）。 style 属性中的 css 属性的优先级最高。除非在某些以前的样式中没有!important：

<img style="any css properties you need" src="..." />

【讨论】：

感谢您的回答，但问题比较棘手。我的编辑可能会为您澄清。谢谢
还是看没问题。您应该能够以某种方式在页面上注入您的代码。您可以修改每个元素，正如我从您的描述中了解到的那样（“所以基本上，这意味着第一个通用规则会强制您为页面中的每个 img 显式定义 display 属性。” - 您可以这样做，但要不想要，我理解你），但你为什么不能添加
display: not-none 不存在，这就是为什么我说它强制你明确定义每个标签的属性。我不想（也不能）一个接一个地访问标签（它们是由 JavaScript 生成和控制的）。这个想法是为这个问题找到一个“通用”的解决方案。我认为这在理论上具有挑战性。如果我找到解决方案，我会发布它。感谢您的宝贵时间
你可以使用 :not() 吗？或者可能会在未来使用“父”选择器带来一些乐趣：sitepoint.com/css-selectors-level-4-the-path-to-css4 在新规范中。如果您可以使用 JS 添加父类，则可以设置自己的通用 css 以撤消任何其他 css 的设置，并使用特定于您的 id 或类的后代的通用重置（也许）。

【解决方案3】：

img 元素的默认display 值为inline-block。如果要重置所有图像的显示值，为什么不使用呢？

如果您有多个不同类型的元素被设置为奇怪的值，那么问题可能有点复杂，因为您需要考虑将哪些元素设置为什么显示类型。但是所有的 HTML 元素都有明确定义的默认显示类型，因此将它们全部重置应该不会太难。

img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...

如果归根结底，您可以只使用可用的reset CSS scripts 之一，将所有内容设置回正确的默认值。

【讨论】：

您好，感谢您的回答。这个问题更棘手。作为一名开发人员，我被要求创建一个模块，该模块可以适应来自公司的大型网站的许多不同页面。问题是：他们在许多标签上设置了通用的不连贯规则（不是显示属性：这只是一个案例研究示例），我无法更改他们的 CSS，因为我的“模块”将作为一个独立元素交付，可以只是嵌入到他们自己的代码中......无论如何，我做到了。所以基本上，没有人能够找到魔术。

【解决方案4】：

不，您无法阻止其他规则应用于特定元素。您必须为该 html 元素重新定义所有这些规则，以便它们将覆盖所有其他规则。

【讨论】：