Question

这个问题可能听起来有点奇怪/新手/愚蠢。请耐心等待。

以下代码是我使用CSS创建的网页的一小部分， HTML和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>
 --------------------------------------------------------------------

如您所见，我已经包含了一个css文件style.css，其中包含正确显示PART 2所需的所有样式类。

问题是，只要第1部分处于活动状态（是真的），就一样 css也适用于文件SHOW.CFM中的元素。这完全弄乱了页面的原始显示。

目前我已在链接下方放置了一个标记，以阻止处理页面和正在加载的css文件。

我多次检查过show.css，可以确认没有使用styles.css中的类。

因此，我的问题是我是否可以阻止style.css中的样式应用于从SHOW.CFM加载的元素

如果这个问题非常愚蠢，请原谅我;）

Answer 1

如果选择器匹配，则规则将应用，直到规则（设置相同的属性）被级联进一步向下覆盖。

您可以更改选择器以阻止它们匹配您不希望它们匹配的元素，也可以覆盖该部分中的所有规则。

Answer 2

HTML5允许scoped stylesheets，但只允许使用Firefox supports it so far。还有polyfill JavaScript。

因此，您必须调整标记和样式，使其仅匹配part2，而不是part1。在紧要关头，您可以在每个选择器前加#wrapper。例如，如果规则显示为a{color:red}，请将其替换为#wrapper a {color:red;}。

顺便说一下，part1可能应该是<body>而不是<head>的孩子。

Answer 3

使用伪类:not()：

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

Answer 4

使用if else而不仅仅是确定应该包含哪个css文件呢？换句话说，仅在第2部分显示时包括styles.css。这样，您可以完全避免继承和范围问题。

停止在代码的特定部分应用的CSS样式

4 个答案: