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

这个问题可能听起来有点奇怪/新手/愚蠢。请多多包涵。停止CSS样式应用于代码的特定部分

下面的代码是我使用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部分处于活动状态（是true），同样的 css也会应用于文件SHOW.CFM中的元素。这完全混淆了页面的原始显示。

目前，我已经在链接下放置了一个标签，用于停止处理页面和正在加载的css文件。

我检查了show.css多次，并且可以确认没有使用styles.css中的类来使用它。

因此，我的问题是，如果我能阻止款式从SHOW.CFM

请原谅我装元素被应用的style.css如果问题是出奇的愚蠢;）

来源

2012-04-13 aman.kejriwal

我不明白这一点。这个问题没有明确的答案，但仍然有人投票。好的社区：/ – 2012-04-14 05:23:25

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

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

来源

2012-04-13 10:55:34 Quentin

你能否写一个2-3行的样本来解释你的意思是通过改变选择器？ – 2012-04-13 11:07:58

将'div'更改为'#somePartOfThePage div'（例如）。 – Quentin 2012-04-13 11:09:53

您也可以按照我的建议进行操作，只需在用于第1部分的文件之后包含第2部分的css文件即可。它与Quentin的建议相同，因为您似乎在两个文件中都具有相同的选择器。稍后会覆盖前一个。 – 2012-04-13 19:18:16

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

因此，您必须调整您的标记和样式，以便它仅匹配part2，而不匹配part1。在捏，你可以在每个选择器前面#wrapper。例如，如果规则说a{color:red}，则用#wrapper a {color:red;}替代。

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

来源

2012-04-13 10:56:35 phihag

可能缺少浏览器支持，但这就是polyfills的用途。以下是范围样式表的一个示例：https：// github。com/thingsinjars/jQuery-Scoped-CSS-plugin – meustrus 2014-06-18 21:29:23

@meustrus谢谢，补充说明了答案。 – phihag 2014-06-19 13:54:49

-1

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

来源

2012-04-13 11:01:49

第2部分始终显示。 – 2012-04-13 11:07:20

然后在if语句为true时添加代码之前列出style.css，并在当时显示的代码中包含其他css文件。 – 2012-04-13 12:05:48

使用伪类:not()：

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

来源

2016-09-19 19:46:38 AxeEffect

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

回答

相关问题