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標籤不改變顏色與引導

回答

相關問題