html - css文件的执行顺序

Question

我在 html 文件中有多个 css 文件。它会导致某些样式发生冲突。

我想知道执行顺序以避免冲突或建议我一些其他方法。 下面是代码。

    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="libs/ionicons/css/ionicons.min.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">

    <link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox.css">
    <link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox-theme.css">

    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/main.css"> 
    <link rel="stylesheet" href="css/cropper.min.css">  
    <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fileinput.cs">

Answer 1

CSS 文件将从上到下解析。例如，main.css 中的任何冲突样式都将被 style.css 覆盖。

我建议使用像 Sass 这样的 CSS 预处理器和像 Gulp 这样的任务运行器来将你的样式表捆绑在一起，从而减少浏览器必须发出的请求数量。这也可以更轻松地为任何样式命名空间以避免冲突。

例如:

#namespace {
  // original code goes here, which will all be prefixed with #namespace
}

仅供引用，上面的代码中有一个拼写错误——css/fileinput.cs 缺少一个 s。