未显示活动链接类的背景颜色。边框变为虚线,但颜色不变。到底是怎么回事?我是css的新手,有点沮丧。请帮忙!哦,颜色也不起作用。我只是这样做来测试它。我真的不想在白色背景上写白色文字。
nav{
margin:0 auto;
width: 75%;
}
nav a {
text-align: center;
display: block;
width: 20%;
float: left;
margin: 0px 0px 0px 30px;
padding: 20px 0px;
border: 2px solid black;
}
a:link {
font-family: sans-serif;
background-color: rgba(221, 221, 221, 1);
color: rgba(86, 19, 139, 1);
}
a:visited{
background-color: rgba(221, 221, 221, 1);
color: rgba(171, 171, 171, 1);
}
.active{
background-color: white;
color: white;
border: 5px dashed black;
}

<header>
<h1>Ulimate Frisbee History</h1>
<nav>
<a href="index.html">Home</a>
<a href="teams.html">Teams</a>
<a href="history.html" class = "active">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
&#13;
答案 0 :(得分:1)
正如@OvidiuUnguru指出的那样,由于 CSS选择器优先级,background
和color
属性不受影响,或者使用正确的术语Specificity 。它指出最精确/特定的情况将是最后一次应用,a:link
比.active
更精确。
您可以使用!important
,但优先级规则仍然适用,除非只有一个!important
规则...这就是要避免使用IMO,因为它可能会导致后续的副作用。 MDN涵盖了!important的最佳实践:
一些经验法则:
在考虑之前,始终寻找一种使用特异性的方法 !important
仅在重写的特定于页面的CSS上使用!important 外国CSS(来自外部库,如Bootstrap或
在你写作时,永远不要使用!important 插件/混搭。
永远不要在网站范围内使用!important。
此外,我非常确定您不希望.active
的所有内容都像这些链接一样,您可以为页面的活动部分,活动按钮和等等。所以你最好的选择是更精确。在此处的代码段中,我只是在选择器前面添加了a
,以使其最精确a.active
。
nav {
margin: 0 auto;
width: 75%;
}
nav a {
text-align: center;
display: block;
width: 20%;
float: left;
margin: 0px 0px 0px 30px;
padding: 20px 0px;
border: 2px solid black;
}
a:link {
font-family: sans-serif;
background-color: rgba(221, 221, 221, 1);
color: rgba(86, 19, 139, 1);
}
a:visited {
background-color: rgba(221, 221, 221, 1);
color: rgba(171, 171, 171, 1);
}
a.active {
background-color: white !important;
color: white !important;
border: 5px dashed black;
}
&#13;
<header>
<h1>Ulimate Frisbee History</h1>
<nav>
<a href="index.html">Home</a>
<a href="teams.html">Teams</a>
<a href="history.html" class="active">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
&#13;
答案 1 :(得分:0)
背景在&#34;活跃&#34;上不是白色的原因上课,因为优先。 a:visited
和a:link
的优先级高于.active
类。
你可以这样做
nav{
margin:0 auto;
width: 75%;
}
nav a {
text-align: center;
display: block;
width: 20%;
float: left;
margin: 0px 0px 0px 30px;
padding: 20px 0px;
border: 2px solid black;
}
a:link {
font-family: sans-serif;
background-color: rgba(221, 221, 221, 1);
color: rgba(86, 19, 139, 1);
}
a:visited{
background-color: rgba(221, 221, 221, 1);
color: rgba(171, 171, 171, 1);
}
.active{
background-color: white !important;
color: white !important;
border: 5px dashed black;
}
&#13;
<header>
<h1>Ulimate Frisbee History</h1>
<nav>
<a href="index.html">Home</a>
<a href="teams.html">Teams</a>
<a href="history.html" class = "active">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
&#13;
但是,我不知道为什么会首先使用:link
和:visited
。
答案 2 :(得分:0)
nav{
margin:0 auto;
width: 75%;
}
nav a {
text-align: center;
display: block;
width: 20%;
float: left;
margin: 0px 0px 0px 30px;
padding: 20px 0px;
border: 2px solid black;
}
a:link {
font-family: sans-serif;
background-color: rgba(221, 221, 221, 1);
color: rgba(86, 19, 139, 1);
}
a:visited{
background-color: rgba(221, 221, 221, 1);
color: rgba(171, 171, 171, 1);
}
.active{
background-color: white !important;
color: white;
border: 5px dashed black;
}
&#13;
<header>
<h1>Ulimate Frisbee History</h1>
<nav>
<a href="index.html">Home</a>
<a href="teams.html">Teams</a>
<a href="history.html" class = "active">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
&#13;
答案 3 :(得分:0)
试试这个。它会帮助你
如果您想要更改“字体颜色”,请使用
.active {
color: white !important;
border: 5px dashed black;
}
如果您想要更改“背景颜色”,请使用
.active {
background-color: white !important;
border: 5px dashed black;
}
如果您想要同时更改“字体和背景颜色”,请使用
.active {
color: red !important;
background-color: white !important;
border: 5px dashed black;
}
答案 4 :(得分:0)
与其他人在不使用nav{
margin:0 auto;
width: 75%;
}
nav a {
text-align: center;
display: block;
width: 20%;
float: left;
margin: 0px 0px 0px 30px;
padding: 20px 0px;
border: 2px solid black;
}
a:link {
font-family: sans-serif;
background-color: rgba(221, 221, 221, 1);
color: rgba(86, 19, 139, 1);
}
a:visited{
background-color: rgba(221, 221, 221, 1);
color: rgba(171, 171, 171, 1);
}
/* new colors working!! */
a.active, a.active:link, a.active:visited {
background-color: green;
color: white;
border: 5px dashed black;
}
<header>
<h1>Ulimate Frisbee History</h1>
<nav>
<a href="index.html">Home</a>
<a href="teams.html">Teams</a>
<a href="history.html" class = "active">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
a:link:not(.active)
或者你可以只为前两个版块执行a:visited:not(.active)
和#include <stdio.h>
int main(void)
{
double vx;
double vy;
printf("Enter the 1st number : "); scanf("%lf" , &vx);
printf("Enter the 2nd number : "); scanf("%lf" , &vy);
printf("\a\n\nx is %f of y" , vx / vy * 100);
return 0;
}