h1标签不改变颜色与引导

我看不出任何理由为什么我的style.css文件不重写引导在这里 - h1标签不会改变为白色。样式表是下面举，除非有一些有关的超大屏幕，我不知道我不太清楚这个问题可能是什么？h1标签不改变颜色与引导

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; 
}

感谢您的帮助！

来源

2017-08-04 Raph117

h1 { color：white！important; } –

您是否尝试检查您的页面以查看此处发生了什么？ –

是啊，使用！重要的是覆盖引导代码。 –

你可以尝试设置颜色在您css文件

h1 { 
    color: white !important; 
    }

来源

2017-08-04 09:51:46

使用H1尝试{颜色：白色重要;}

来源

2017-08-04 09:51:48 Sharvan

尝试用这种

#back1 h1{ 
    color: white; 
}

来源

2017-08-04 13:15:45 Selvakumar

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

.jumbotron h1 { 
    color: white; 
}

避免一些网友建议，因为它是bad practice，可能会造成问题，而且难以调试。

Bootply example

来源

2017-08-04 13:19:46 j08691

如果你想与最高CSS特异性的选择尝试使用

#back1 .container h1{ 
color:white; 
}

看看会发生什么

。另外，您正在加载相同的CSS文件两次，这有点不必要。我试着只用引导CSS来测试你的代码，<h1>标签中的内容是白色的，所以试着看看你的style.css表格，看看是否有任何!important搞乱了事情。

来源

2017-08-06 04:49:43

#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; 
 
}

<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>

看这一个。

来源

2017-08-06 04:58:06

h1标签不改变颜色与引导

回答

相关问题