Question

我看不出为什么我的style.css文件没有覆盖bootstrap的原因 - h1标签没有变为白色。样式表在bootstrap下面，除非有关于jumbotron的东西，我不知道我不太确定问题是什么......

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Raphael Hetherington</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="jumbotron" id="back1">
        <div class="container text-center">
            <h1>My First Page</h1>
            <p>Resize this responsive page to see the effect!</p>
            <span onclick="openNav()">open</span>
        </div>
        </div>
        <div class="container">
            <div id="mySidenav" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <a href="#">About</a>
                <a href="#">Services</a>
                <a href="#">Clients</a>
                <a href="#">Contact</a>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script src="base.js"></script>
    </body>
    </html>

和CSS：

h1 {
    color: white;
}

#back1 {
    background-image: url("images/tiger.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.jumbotron{
    height: 100vh;
}

感谢您的帮助！

Answer 1

您可以尝试在css文件

上设置颜色

   h1 { 
    color: white !important; 
   }

Answer 2

即使你的CSS是在Bootstrap之后加载的，Bootstrap的选择器specificity（.jumbotron h1）也高于你的（h1），它会覆盖你的规则。只需将选择器更改为：

.jumbotron h1 {
    color: white;
}

避免使用某些用户建议的!important，因为它是bad practice，可能会导致问题，并且难以调试。

<强> Bootply example

Answer 3

尝试使用h1 {color：white！important;}

Answer 4

try with this

#back1 h1{ 
    color: white; 
}

Answer 5

如果您想要具有最高CSS特异性的选择器，请尝试使用

#back1 .container h1{
color:white;
}

看看会发生什么。此外，您正在加载相同的CSS文件两次，这有点不需要。我尝试仅使用bootstrap css测试您的代码，并且<h1>标记中的内容为白色，因此请尝试查看style.css表，看看是否有任何!important搞乱了。

Answer 6

＆＃13;

#back1 h1 {
    color: white !important;
}

#back1 {
    background-image: url("images/tiger.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.jumbotron{
    height: 100vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Raphael Hetherington</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="jumbotron" id="back1">
        <div class="container text-center">
            <h1>My First Page</h1>
            <p>Resize this responsive page to see the effect!</p>
            <span onclick="openNav()">open</span>
        </div>
        </div>
        <div class="container">
            <div id="mySidenav" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <a href="#">About</a>
                <a href="#">Services</a>
                <a href="#">Clients</a>
                <a href="#">Contact</a>
            </div>
        </div>
       <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    </body>
    </html>

＆＃13;

看看这个。

h1标签没有用bootstrap改变颜色

6 个答案: