Question

这是我要解决的难点。我在客户端页面内工作以开发滚动界面。基本上，我无法更改doctype，周围元素以及客户页面中已有的样式表或脚本，我必须让我的小块代码“适合”在其中。这对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"，依此类推。

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

Answer 1

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

内联样式始终覆盖样式表规则（除非他们使用!important标记，否则您还需要使用它）。

您应该可以使用您喜欢的CSS重置语法重置所需的任何元素。以下是一些选项：

http://www.cssreset.com/

所以，像 -

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

是你最好的选择。

Answer 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="..." />

Answer 3

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

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

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

如果归结为它，您可以使用其中一个可用的reset CSS scripts来将所有内容设置回正确的默认值。

Answer 4

没有办法阻止其他规则应用于特定元素。你必须重新定义该html元素的所有规则，以便它们覆盖所有其他规则。

如何防止HTML规则成为CSS规则的目标？

4 个答案: