当我使用内部样式时，CSS可以工作，但是当我将它移动到外部文件时，某些属性不起作用。
这里是带有外部CSS的代码（我有什么需要修复）： https://codepen.io/WittyKnee43/pen/vpGPQj
这里是带有内部CSS的代码（它应该如何看起来如此）： https://codepen.io/WittyKnee43/pen/NXNJoV
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Icons-->
<script src="https://use.fontawesome.com/7a7877aa6c.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<style>body {
padding: 0 2em 0 2em;
font-family: 'Poppins', sans-serif;
min-height: 100vh;
}
@import url('https://fonts.googleapis.com/css?family=Poppins:300,600');
@font-face {
font-family: 'Reglo';
src: url('/FONTS/reglo-bold.otf');
}
/*===== NAVIGATION ======*/
.navbar-brand small {
display: block;
font-size: 15px;
text-transform: capitalize;
font-weight: 500;
font-family: 'Poppins', sans-serif;
color: black;
}
.navbar {
padding: 0.5rem 0;
}
.navbar .navbar-brand {
text-transform: uppercase;
font-family: 'Reglo';
font-size: 1.7rem;
font-weight: bold;
}
.nav-link {
color: #000 !important;
}
.navbar-light .navbar-toggler {
border-color: #ffffff;
}
/*===== End of Navigation ======*/
/*===== FOOTER ======*/
.wit-pb-2 {
padding-bottom: 2rem!important;
}
.flex-grow {
flex: 1;
padding: 0;
}
a.wit-footer {
color: #000;
}
/*===== End of Footer ======*/
/*===== PROJECT JUMBOTRON ======*/
.wit-pj-jumbotron {
min-height: 10vh;
padding: 14.08rem 0!important;
margin-bottom: 40px;
background-size: cover;
}
.wit-pj-1 {
background-image: url('https://78.media.tumblr.com/e334f432080b67cef944eeefca5302af/tumblr_oiwytwMDKF1tf8vylo1_1280.png');
}
.wit-pj-2 {
background-image: url('https://i.stack.imgur.com/0ASXA.jpg');
}
.btn-outline-dark {
margin-top: 4px;
color: white;
background-color: transparent;
background-color: black;
border-radius: 1px;
}
.btn-outline-dark:hover {
background-color: white;
color: black;
border-color: black;
}
.btn-visit {
margin-top: 4px;
color: black;
background-color: transparent;
background-color: none;
border: none;
}
.btn-visit:hover {
color: white;
}
/*===== End of Project Jumbotron ======*/
/*===== ABOUT ======*/
/*===== End of About ======*/
</style>
</head>
<body class="d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="index.html">Whitney
<small>Multidisciplinary Designer</small>
</a>
<ul class="navbar-nav mr-auto">
<span class="navbar-text"></span>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="info.html">About</a>
</li>
</li>
</ul>
</nav>
<section class="container-fluid flex-grow">
<!--PROJECT-->
<div class="jumbotron jumbotron-fluid wit-pj-jumbotron wit-pj-1 parallax" title="An image of inside the Battle & Brew bar">
<h1 class="text-center">The Other Project</h1>
<p class="text-center">Creative Direction—Photography—Branding</p>
<p class="text-center">
<a href="#" class="btn btn-outline-dark text-center" target="_blank">Details</a>
<a href="#" class="btn btn-visit text-center" target="_blank">Visit
<i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</p>
</div>
<!--PROJECT-->
<div class="jumbotron jumbotron-fluid wit-pj-jumbotron wit-pj-2 parallax" title="An image of inside the Battle & Brew bar">
<h1 class="text-center">The Other Project</h1>
<p class="text-center">Creative Direction—Photography—Branding</p>
<p class="text-center">
<a href="#" class="btn btn-outline-dark text-center" target="_blank">Details</a>
<a href="#" class="btn btn-visit text-center" target="_blank">Visit
<i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</p>
</div>
</section>
<footer>
<div class="container-fluid wit-pb-2 px-0">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-6">© 2017 wittyknee. All rights reserved.
</div>
<div class="col-md-6 text-right align-self-end">
<a href="#" class="wit-footer">hello@email.com </a>—
<a href="#" class="wit-footer">Resume </a>—
<a href="#/" target="_blank" class="wit-footer">LinkdIn</a>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
</body>
</html>
应该做出哪些改变？
答案 0 :(得分：1)
In your external stylesheet, try adding the following functionalities.
.btn-outline-dark {
margin-top: 4px;
color: white !important;
background-color: transparent;
background-color: black !important;
border-radius: 1px;
}
.btn-outline-dark:hover {
background-color: white !important;
color: black !important;
border-color: black !important;
}
Changes: attach the attribute "!important" to background-color and color.
The "!important" overrides any style affecting it and lays emphasis on these