控制 CSS 加载顺序

Question

This question 表示 css 文件按调用顺序加载。但是我有三个 css 文件，两个来自 cdn，一个来自本地，最后调用本地的。 cdn 优先于本地 css。我假设这是因为非本地 css 表需要更长的时间来加载。如何让本地 css 的规则优先？

我试过了

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">

和

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'style.css'));
    });
</script>
<link rel="stylesheet" href="style.css">

编辑：问题在于

.panel-head > .panel-default

在 cdn 文件中优先于

.panel-default

Answer 1

浏览器在 CSS 中从上到下读取代码。例如。您可以使用相同的确切名称创建相同命名的 div #ID 两次，但是，页面最下方或最后一个是该 div 实际将在您的 html 页面上显示的内容。

您需要获取本地 style.css 并将其放在 first 以便页面首先加载它。希望这可以帮助。如果我不清楚或者这不是您需要的答案，请告诉我，我可以提供进一步的帮助。

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>