4

这个问题可能听起来有点奇怪/新手/愚蠢。请多多包涵。

下面的代码是我使用 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，其中包含正确显示第 2 部分所需的所有样式类。

问题是，只要第 1 部分处于活动状态（为真），相同的 css 也会应用于文件 SHOW.CFM 中的元素。这完全打乱了页面的原始显示。

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

我已经多次检查 show.css 并且可以确认其中没有使用来自 styles.css 的类。

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

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

4

4 回答 4

5

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

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

于 2012-04-13T10:55:34.133 回答
2

HTML5 允许范围样式表，但目前只有 Firefox支持它。还有一个polyfill JavaScript。

因此，您必须调整您的标记和样式，使其仅匹配第 2 部分，而不是第 1 部分。在紧要关头，您可以在每个选择器前面加上#wrapper. 例如，如果规则说 ，则将其a{color:red}替换为#wrapper a {color:red;}。

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

于 2012-04-13T10:56:35.267 回答
0

使用伪类:not()：

.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
   ...
}
于 2016-09-19T19:46:38.197 回答
-1

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

于 2012-04-13T11:01:49.490 回答