添加 bootstrap 和 Font 真棒破坏 css-为什么？答案

【问题标题】：Adding bootstrap & Font awesome ruins css-why?添加 bootstrap 和 Font 真棒破坏 css-为什么？
【发布时间】：2016-04-27 00:25:17
【问题描述】：

因为我在我的 html 文件中添加了 bootstrap 和 font awesome，所以之前完成的大部分 css 都消失了（背景颜色、google 字体）

<head>
    <meta charset="utf-8">
    <title>Games</title>
    <link rel="stylesheet" href="main.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/font-awesome/4.5.0/css/font-awesome.min.css">

    <link href='https://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css'>       
    <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
</head>

有人知道为什么吗？谢谢！！

【问题讨论】：

您尝试更改订单？

标签： html fonts font-awesome-3.2

【解决方案1】：

将您的 main.css 文件声明移动到您的引导程序和字体真棒声明之后。由于 CSS 是级联，以后的样式会覆盖您的自定义样式。

<head>
    <meta charset="utf-8">
    <title>Games</title>
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <link href='https://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css'>       
    <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="main.css">  
</head>

【讨论】：

如果bootstrap css有更高的特异性，改变顺序也无济于事。
@GolezTrol 通常，Bootstrap 不使用 !important 正是出于这个原因。
我不是在说这个。我说的是Specificity，这不仅仅是添加!important。（无论如何你都不应该使用!important）
@GolezTrol 我没有听说过这个词，但我明白了这个概念。它仍然可以被具有相同（或更高）特异性的后续文件覆盖。
我的意思是如果Bootstrapper的特异性更高，后面的文件不会覆盖前面的，所以仅仅改变顺序可能不是一个完整的解决方案。试一试也无妨，当然，也许你很幸运。 :)