Question

我正在使用bootstrap作为我喜欢的导航栏，我使用bootstrap中的style.css，但我也希望从另一个拥有自己的style.css的框架中实现一些元素。问题是元素看起来是扭曲的，因为第二种样式会重写第一种。

有没有办法指定style.css的影响力？

例如，style_1.css可以影响：

<header>...</header>

和style_2.css影响：

<main>...</main>

Answer 1

不可能直接使用分发的CSS文件来执行此操作，但您可以为每个CSS框架库（或CSS文件）创建名称空间，并在任何您想要使用该框架功能的地方使用它。

有关如何命名样式表的详细信息，请参阅How to namespace Twitter Bootstrap so styles don't conflict和Is there any ready to use Bootstrap css file with prefix。

如果你正在使用less，那么你可以通过在bootstrap中添加一个pregfix来创建命名空间，如下所示：

.bootstrap-styles {
  @import 'bootstrap';
}

/* OR */

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

您可以使用http://www.css-prefix.com/作为任何CSS文件的前缀，然后像这样使用它：

<header class="bootstrap-ns-prefix> (some bootstrap code inside) </header>

<main class="style2-ns-prefix"> (some other framework/css styles that don't get affected by bootstrap) </main>

修改

它不会自动运行，您必须命名每个CSS，然后使用这些CSS文件而不是首字母。生成器www.css-prefix.com适用于我，但它在每个注释的开头/结尾和之前/之后添加了一些额外的类/命名空间;在继续操作之前，您应该检查并更正/删除任何错误。如上所述，您可以使用LESS或SASS框架来生成这些名称空间。

以下是同时使用Bootstrap和jQuery UI的示例：

<head> ... <link rel="stylesheet" href="css/bootstrap_ns.css"> <link rel="stylesheet" href="css/jqueryui_ns.css"> ... </head> <body> <button class="btn btn-primary">Test Button</button> <div class="bootstrap-ns"> <button class="btn btn-primary">Bootstrap Button</button> </div> <div class="jqui-ns"> <button id="jqbtn" class="btn btn-primary">jQuery UI Button</button> </div> <script type="text/javascript"> jQuery(function($) { $('#jqbtn').button(); }); </script> </body>

结果就是这个：

如您所见，所有三个按钮都有引导按钮类btn btn-primary，但只有bootstrap-ns容器内的按钮使用引导样式。

您可以在此处看到演示页：http://zikro.gr/dbg/html/bootstrap-ns/

您可以在此检查bootstrap.css生成的jquery.ui.css和www.css-prefix.com并手动清理。

Answer 2

一般不是。但是你可以使用＆gt;选择无处不在：

#divtoApplyTo > a {
 color: green;
}

这样，特定div中的所有链接都会发生变化。

Answer 3

这是不可能的。样式表适用于整个文档，而不适用于它的子部分。然后，元素是否受规则影响的是使用的选择器。接下来，当您希望规则仅适用于$(document).ready(function () { var now = moment(); console.log(now); //var repeat = setInterval(displayTime, 200); var tzones = moment.tz.names(); tzones.forEach(function(key,value){ $('<option/>').val(key).html(key).appendTo('.tz_list'); }); var repeat; var clock_count = 1; var timezone =""; function displayTime(timezone, clock_number) { console.log(timezone); var location = moment().tz(timezone).format("ddd, MMMM Do YYYY, HH:mm:ss"); console.log(location); //$('.clock '+clock_number)[0].childNodes[0].nodeValue = timezone; var selector = '.clock '+clock_number.toString() + ' p'; console.log(selector); //$('.clock '+clock_number.toString()).css({"height":"100px", "width":"500px"}); $(selector).text(location.toString()); }; $('.button').on('click', function(e){ console.log(e.target.value); var div = '<div class="clock '+clock_count.toString()+'"><p></p></div>'; $(div).insertAfter('.button'); clock_count+=1; displayTime(timezone, clock_count-1); }); $('.tz_list').on('change', function(event){ console.log(event.target.value); timezone = event.target.value; }); });中的元素时，它们必须以<header>或header >开头。

然而，从您的评论中可以看出，重写所有规则不是一种选择，因为它太多了。解决方案可能是使用像SASS这样的预处理器。

示例：

输入（SASS）

header (space)

输出（CSS）

header > {
  div {
   color: red;
  }

  button {
    border: 1px solid hotpink;
  }
}

我们的想法是将所有仅对header > div { color: red; } header > button { border: 1px solid hotpink; }有效的规则包装到适当的块中，然后让SASS为您重写规则。

然而，这会导致整个文件大小的爆炸。此外，人们不应忘记框架也包括全球规则。由于<header>或header > html之类的内容是虚假的，因此此解决方案可能仍需要进行手动更改。

Answer 4

Haven没试过，但发现了这个：最后的解决方法是使用SASS（由异地人推荐），因为它允许你嵌套元素然后自动生成最终的CSS。这个过程一步一步是：Applying CSS styles only to certain elements

连接两个Bootstrap文件（bootstrap.css和 bootstrap-responsive.css）bootstrap-all.css。
使用内容bootstrap-all.scss创建新的SASS文件div.bootstrap {。
将bootstrap-all.css附加到bootstrap-all.scss。
将div.bootstrap追加到}，关闭bootstrap-all.scss选择器。
在bootstrap-all.scss上运行SASS以生成最终的CSS文件。
在最终文件上运行YUI Compressor以生成最小化版本。
将最小化版本添加到head元素并包装我想要的所有内容要应用于<div class="bootstrap"></div>的样式。

Answer 5

我遇到了同样的问题，我这样解决了它：

复制要在特定区域中使用的CSS规则。
通过将其粘贴到以下链接中将它们转换为SCSS：css2scss然后

单击箭头（选择SCSS）。
复制获得的SCSS规则结果，并将其粘贴到以下链接中：scss2css。

使用以下规则将整个 SCSS规则包装起来：.wrapper {}

像这样：

.wrapper {
           a  {
                 color: #007bff;
                 text-decoration: none;
                 background-color: transparent;
               }

             /*all other rules*/
         }

单击“编译”按钮，然后等待直到获得所有CSS。

上述SCSS的结果如下：
```
.wrapper a {

            color: #007bff;
            text-decoration: none;
            background-color: transparent;

            }
```
，因此全部的其他CSS规则将以.wrapper类作为前缀。
单击“下载”按钮下载CSS，然后将其链接到HTML

页面。

仅在某些区域中使用该CSS并使用div

在该区域中弯曲

并给该div一个“包装器”类。

<div class = "wrapper">
  <a class = "a_Class_From_The_Downloaded_CSS_File"/>
  <!-- put here all other HTML tags you want
      and add all the class etc. you want from the 
      CSS file you created.
      it will not collide with other CSS class from other
      CSS files because of the div.wrapper tag 
      -->

</div>

将样式表仅应用于HTML文件的某个区域

5 个答案: