文章/答案/技术大牛

发布

问CSS加载顺序错误
EN

Stack Overflow用户

提问于 2016-07-28 22:37:51

回答 1查看 265关注 0票数 1

我目前正在写一个Bootstrap css的电子应用程序。不管出于什么原因，bootstrap-heme.min.css在bootstrap.min.css之前加载，尽管它的顺序是相反的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="src/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
    <link type="text/css" rel="stylesheet" href="src/css/styles.css">
    <link type="text/css" rel="stylesheet" href="src/css/tooltip.css">
    <title>Hello World</title>
    <link rel="icon" href="src/img/favicon.ico">
    <script>window.$ = window.jQuery = require('jquery');</script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="src/js/jquery-ui.min.js" type="text/javascript"></script>
    <script>window.sigma = require('linkurious');</script>
    <script src="node_modules/linkurious/dist/plugins.min.js" type="text/javascript"></script>
    <script src="node_modules/dagre/dist/dagre.min.js" type="text/javascript"></script>
    <script src="node_modules/bootstrap-3-typeahead/bootstrap3-typeahead.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="root">
    </div>
    <script>
      (function() {
        const script = document.createElement('script');
        if (process.env.ENV === 'development '){
          script.src = 'http://localhost:9000/dist/bundle.js';
        }else{
          script.src = './dist/bundle.js';
        }
        document.write(script.outerHTML);
      }());
    </script>
  </body>

  <script>
    // You can also require other files to run in this process
    require('./renderer.js')
  </script>
</html>

作为示例，以下是在检查按钮时来自chrome dev工具的预期输出：

下面是我得到的结果：

此外，下面是dev tools中的network选项卡，其中显示了首先出现的主题文件：

我是不是漏掉了什么明显的东西？有没有解决这个问题的办法？

另一个例子，这是在同一个应用程序上，在电子邮件之外运行相同的html。

这是内部电子：

电子应用程序内部的bootstrap主题文件没有正确应用面板标题样式，而它在电子应用程序之外。

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2016-07-28 23:03:49

原因在于CSS的特殊性，这是一个控制CSS选择器的重要性/层次结构的系统。简单地说，单个类选择器比由类/标签/ID链组成的更复杂的选择器具有更低的特定性，这就是在您的案例中发生的情况：.btn-success作为选择器比屏幕截图中第一个列出的规则的选择器具有更低的特定度，因为那个选择器由非常特定的选择器链组成--结合起来--比单个类“计数更多”。

这里有一篇关于这个主题的有用的文章：https://css-tricks.com/specifics-on-css-specificity/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38639529

复制

相似问题

问CSS加载顺序错误
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS加载顺序错误EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS加载顺序错误
EN