Question

This question说css文件按照他们调用的顺序加载。但我有三个css文件，其中2个来自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并将其设置为优先，以便页面首先加载它。希望这可以帮助。如果我不清楚，或者这不是您需要的答案，请告诉我，我可以继续提供帮助。

<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>

控制css加载顺序

1 个答案: