Question

我的CSS工作正常但是在通过源文件添加Bootstrap后，一些CSS样式被删除并被bootstrap覆盖了。我也尝试过使用Bootstrap CDN但结果相同。我也尝试过以前的项目作为参考，一切都是一样的，但这个项目不起作用。这是我的代码：

这是我的CSS和HTML文件：

＆＃13;

* {
    margin:0;
    padding:0;
}
body {
    margin:0;
    padding:0;
}

@font-face {
    font-family: Minima;
    src: url(font/Minima.TTF);

    font-family: Arial;
    src: url(font/arial.TTF);
}

/*home background image*/
#header {
    background-image: url("../images/home.jpg");
    min-height: 700px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

#mytitle {
    color:#f2f2f2;
    font-size: 60pt;
    padding-top:20%;
    font-family: Minima;
    text-align:center;
}

#subtitle {
    color:#f4f4f4;
    font-size: 18pt;
    float:right;
    margin-right:15.5%;
    font-family: Arial;
}
#subtitle2 {
    color:#f4f4f4;
    font-size: 18pt;
    float:right;
    margin-right:15.5%;
    font-family: Arial;
}

/*navigation */
.div-menu .sub-menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    margin-right:5%;
    margin-left:5%;
    float:right;
    font-family: Arial;
}

.div-menu .sub-menu li {
    float:left;
}

.div-menu .sub-menu li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    text-align:center;
    padding: 14px 16px;
}

/*for ghost button*/
.ghost-button-semi-transparent {
    display: inline-block;
    width: 200px;
    padding: 8px;
    color: #fff;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
    transition: background-color 0.2s ease-out,
    border-color 0.2s ease-out;
    border-radius: 7px;
    font-size:15pt;
}
.ghost-button-semi-transparent:hover,
.ghost-button-semi-transparent:active {
    background-color: #fff; /* fallback */
    background-color: rgba(255, 255, 255, 0.4);
    border-color: #fff; /* fallback */
    border-color: rgba(255, 255, 255, 0.4);
    transition: background-color 0.3s ease-in,
    border-color 0.3s ease-in;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NAME | Web Profile</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="header">
    <div class="div-menu">
        <ul class="sub-menu">
            <li><a href="#" style="float:left;">LOGO</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Experiences</a></li>
            <li><a href="#">Education</a></li>
        </ul>
    </div>
    <div class="text">
        <h1 id="mytitle">SOME CAPTION HERE</h1>
        <h2 id="subtitle">CAPTION AGAIN</h2>
        <br>
        <br>
        <h2 id="subtitle2">CAPTION AGAIN</h2>
    </div>
</div>

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>

</body>
</html>

＆＃13;

Answer 1

您的订单应该是这样的

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

Answer 2

您应该更改加载css文件的顺序，即

在此处详细了解：http://www.w3.org/TR/CSS2/cascade.html

EDIT1：如下所示，body和container（标签）的优先级低于类选择器，因为自定义CSS被引导程序覆盖，因为引导程序根据{{1}等类提供样式}。要解决此问题，您可以为正文提供一个类，并将所有样式应用于该类。

＆＃13;

* {
color: red;
}

.class{
color:purple;
}
span{
color: orange;
}

＆＃13;

<p>p tag with out any class</p>
<p class="class"> Class has more precedence than * <p>
<span class="class"> Class has more precedence than tag(such as body, span, p etc) </span>

＆＃13;

Bootstrap正在覆盖自定义CSS样式表

2 个答案: