Question

我目前正在使用Bootstrap css编写一个Electron应用程序。无论出于何种原因，bootstrap-theme.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工具的预期输出：

而这就是我所得到的：

此外，这里是开发工具中的网络选项卡，显示首先出现的主题文件：

我错过了一些明显的东西吗？这个问题是否有解决方法？

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

而且电子内部是继承人：

面板标题样式不是由电子应用程序内的bootstrap-theme文件正确应用，而是在Electron之外。

Answer 1

原因在于CSS 特异性，这是一个统治CSS选择器重要性/层次结构的系统。简单地说，单个类选择器具有较低的特定性，即由一系列类/标签/ ID组成的更复杂的选择器，这种情况在您的情况下发生：.btn-success作为选择器的特定程度低于该规则的选择器在屏幕截图中首先列出，因为该规则由一个非常特定的选择器链组成 - 组合 - “数量更多”而不是单个类。

以下是有关该主题的有用文章：https://css-tricks.com/specifics-on-css-specificity/

CSS加载乱序

1 个答案: