问题在于：focus在CSS中不起作用。我以为这可能是因为我正在使用Bootstrap，但是我已经尝试了有关Bootstrap焦点的所有内容。请注意，从下面的代码片段中，：focus可用于未附加任何html的锚点。 如果可以，请帮助。谢谢！
/* NAVIGATION */
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
#navbar .nav-link:focus {
color: #8e0000;
text-size-adjust: 1.4em;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
@keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
@media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 30px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Information meta tags -->
<meta name="description" content="A portfolio page for Bernard Major">
<meta http-equiv="author" content="King Major">
<!--LOCAL-->
<!-- <link rel="stylesheet" type="text/css" href="assets/css/reset.css"> -->
<!-- Bootstrap CSS HOSTED-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--LOCAL-->
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- FAVICON -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>King Major</title>
</head>
<body>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s; animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item focus">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor2">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor3">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, <a href="#">let's talk!</a></h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I loveabout coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
<a
href="#skills">skills</a>, and some of my recent
<a href="#projects">projects</a>. THANKS!
</p>
<a href="General_Resume.pdf" class="btn btn-outline-primary" target="__blank">Print My Resume</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SKILLS -->
<div class="blank" style="margin: -65px 0px 250px 0px; position: absolute;">
<a id="myanchor2"></a>
</div>
<section id="skills" class="section3">
<div class="row justify-content-center">
<div class="col-md-7 col-sm-12">
<div class="card text-center">
<div class="container">
<div class="card-title">
<h2>Tech I've learned:</h2>
</div>
<div class="col"><img class="code-icon" src="/portfolio2/static/media/code- icon.356b6fb2.svg">
<p>JavaScript, HTML, CSS, MongoDB, Express, Node.js, Bootstrap, mySQL, AWS Cloud Storage, and more...</p>
<h2>Tools I use:</h2>
<ul>
<li>Visual Studio Code</li>
<li>Github</li>
<li>Express</li>
<li>Linux</li>
<li>Axios</li>
<li>npm</li>
<li>Bash</li>
<li>Chrome Developer Tools</li>
<li>And more...</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
答案 0 :(得分：0)
我对其进行了测试，并且效果很好！ 用键盘上的Tab键专注于它
和 也许您需要使用：hover或...
答案 1 :(得分：0)
如果我正确理解了您的问题，则希望突出显示颜色。
您可以为按钮做两件事。
您可以选择所需的一个，例如您使用了:hover即可满足您的需求。
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
#navbar .nav-link:focus {
color: #8e0000;
text-size-adjust: 1.4em;
}
#navbar .nav-link:hover {
color: yellow;
display: block;
background-color: blue;
text-size-adjust: 1.4em;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
@keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
@media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 30px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
}<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Information meta tags -->
<meta name="description" content="A portfolio page for Bernard Major">
<meta http-equiv="author" content="King Major">
<!--LOCAL-->
<!-- <link rel="stylesheet" type="text/css" href="assets/css/reset.css"> -->
<!-- Bootstrap CSS HOSTED-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--LOCAL-->
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- FAVICON -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>King Major</title>
</head>
<body>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s; animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item focus">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor2">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor3">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, <a href="#">let's talk!</a></h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I loveabout coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
<a href="#skills">skills</a>, and some of my recent
<a href="#projects">projects</a>. THANKS!
</p>
<a href="General_Resume.pdf" class="btn btn-outline-primary" target="__blank">Print My Resume</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SKILLS -->
<div class="blank" style="margin: -65px 0px 250px 0px; position: absolute;">
<a id="myanchor2"></a>
</div>
<section id="skills" class="section3">
<div class="row justify-content-center">
<div class="col-md-7 col-sm-12">
<div class="card text-center">
<div class="container">
<div class="card-title">
<h2>Tech I've learned:</h2>
</div>
<div class="col"><img class="code-icon" src="/portfolio2/static/media/code- icon.356b6fb2.svg">
<p>JavaScript, HTML, CSS, MongoDB, Express, Node.js, Bootstrap, mySQL, AWS Cloud Storage, and more...</p>
<h2>Tools I use:</h2>
<ul>
<li>Visual Studio Code</li>
<li>Github</li>
<li>Express</li>
<li>Linux</li>
<li>Axios</li>
<li>npm</li>
<li>Bash</li>
<li>Chrome Developer Tools</li>
<li>And more...</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>