简体   繁体   English

CSS 不改变文本颜色

[英]CSS not changing the text color

Using Bootstrap4, have set up a div with the class of greenfooter (that takes care ofthe background color and padding), inside I created a container with four columns.使用 Bootstrap4,使用 greenfooter 的 class 设置了一个 div(负责处理背景颜色和填充),在里面我创建了一个有四列的容器。

I set up the css to turn the H5 a lighter green color, and set the a tag to be white and lighter green/no text decoration when hovered.我设置了 css 将 H5 设置为浅绿色,并将 a 标签设置为白色和浅绿色/悬停时无文字装饰。

The css code for the color change isn't working, and I think my css is incorrect, can anybody see where I went wrong?用于颜色更改的 css 代码不起作用,我认为我的 css 不正确,有人能看到我哪里出错了吗?

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

container is child of greenfooter class element so, a space is needed and so on for row, col-md-3 and h5容器是 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM