How to prevent a HTML element from being targeted by a CSS rule?

Question

Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers. The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like

.containter1 .containter3 { ... }

will target an element inside :

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

Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like

img { ... }

will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?

/* EDIT TO CLARIFY */

I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:

img { display:none; }

The problem is that you cannot set a corresponding generic rule to do the opposite, like :

img { display:not-none; }

because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.

So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).

Answer 1

If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.

In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).

You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:

http://www.cssreset.com/

So, something like -

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

is your best bet.