[英]CSS not changing the text color
使用 Bootstrap4,使用 greenfooter 的 class 設置了一個 div(負責處理背景顏色和填充),在里面我創建了一個有四列的容器。
我設置了 css 將 H5 設置為淺綠色,並將 a 標簽設置為白色和淺綠色/懸停時無文字裝飾。
用於顏色更改的 css 代碼不起作用,我認為我的 css 不正確,有人能看到我哪里出錯了嗎?
html
<div class="w-100 g-py-30 greenfooter">
<div class="container">
<div class="row">
<div class="col-md-3">
<h5>McDowell Technical<br>
Community College</h5>
<p>54 College Drive<br>
Marion, NC 28752</p>
<p>
<a href="https://www.google.com/maps/place/McDowell+Technical+Community+College/@35.6555866,-81.9620476,15z/data=!4m5!3m4!1s0x0:0xf42cd81f2a7dd3ec!8m2!3d35.6555866!4d-81.9620476" target="_blank" class="g-color-white">Get Directions</a> </p>
<h5>call: 828-652-6021 </h5>
</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>
css
.greenfooter {
background-color: #5C8627;
color: white;
}
.greenfooter.container.row.col-md-3 h5 {
color: #C8E72F;
}
.greenfooter.container.row.col-md-3 a {
color: #ffffff;
}
.greenfooter.container.row.col-md-3 a:hover {
color: #C8E72F;
text-decoration: none;
}
容器是 greenfooter class 元素的子元素,因此行、col-md-3 和 h5 需要一個空格等
.greenfooter {
background-color: #5C8627;
color: white;
}
.greenfooter .container.row.col-md-3 h5 {
color: #C8E72F;
}
.greenfooter .container .row .col-md-3 a {
color: #ffffff;
}
.greenfooter .container .row .col-md-3 a:hover {
color: #C8E72F;
text-decoration: none;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.