Stop CSS styles to be applied in particular sections of the code

问题

This question may sound a bit weird/novice/stupid. Please bear with me.

The below code is a small portion of a webpage I have created using CSS, HTML and coldfusion.

        <head>
    ---------------------Part 1--------------------------------------
    <CFIF CompareNoCase('#aid#', 0)>   
                <cfinclude template="show.cfm">
        <cfabort>
    </CFIF>
    -----------------------------------------------------------------

    <link rel="stylesheet" href="styles/style.css?1322665623">
        </head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
  <div class="header left">
    <h1><a href="index.cfm" class="right logo">Name Of Client</a></h1>
    <div class="tagline">
      <span class="left blair"><a href="index.cfm" class="homelink">home</a></span>
      <span class="headerline"></span>
      <span class="right blair"><a href="index.cfm" class="homelink">antiques</a></span>
    </div>
  </div>
 --------------------------------------------------------------------

As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.

Problem is, whenever part 1 is active ( is true), the same css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.

For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.

I have checked show.css multiple times and can confirm that no class from styles.css is used in it.

Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM

Pardon me if the question is insanely stupid ;)

回答1:

If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.

You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.

回答2:

HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.

Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.

By the way, part1 should probably be a child of <body> instead of <head>.

回答3:

Use the pseudo-class :not():

.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
   ...
}

回答4:

What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.

来源：https://stackoverflow.com/questions/10139447/stop-css-styles-to-be-applied-in-particular-sections-of-the-code

标签

html

css

coldfusion