Question

解决方案： 我在HTML和Javascript方面知之甚少地回答了这个问题。我很抱歉，无论如何，这里的解决方案是不使用相同的容器名称来防止它与其他css容器重叠。

回答问题的方式前面几乎没有JS的知识

如何在不覆盖其他css文件的情况下导入bootstrap.css文件？有什么方法可以防止这种情况吗？我希望安全的时间。

<!DOCTYPE HTML>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="style/style.css" />
    <link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
    <link href="style/shoppingcartstyle.css" rel="stylesheet" type="text/css">

</head>

提前致谢！

Answer 1

更改

<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />

到

<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />

之后你的问题在于bootstrap CSS中的任何！important声明的标签，但是你写入style.css的任何东西都不会被bootstrap覆盖，否则，为了确保 - 如果有什么东西在你声明它时很重要你的style.css，添加！important标签，它取代了bootstrap.css之前的任何声明 - 它是一个标签，在使用UI框架时非常棒。

Answer 2

确保在每隔一个之前链接到引导样式表。

应该是

   <link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
   <link rel="stylesheet" type="text/css" href="style/style.css" />
   <link href="style/shoppingcartstyle.css" rel="stylesheet" type="text/css">

CSS规则级联的规则比试图严厉地解释它们更复杂，我只是简单地引用你specification：

使用！important标签是一个不太好的组合网站的标志，但是你可以使用它来覆盖所有其他风格规则。

实施例

p{
    color:#FFF !important;
}

Answer 3

我的意思是，例如，如果我在style.css和bootstrap.css中都有.btn-primary，它将覆盖彼此。

导入css而不重叠其他css容器

3 个答案: