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。

执行css文件的序列

1 个答案: