链接的背景颜色不起作用

时间:2017-08-30 13:49:07

标签: html5 css3

未显示活动链接类的背景颜色。边框变为虚线,但颜色不变。到底是怎么回事?我是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;
&#13;
&#13;

5 个答案:

答案 0 :(得分:1)

正如@OvidiuUnguru指出的那样,由于 CSS选择器优先级backgroundcolor属性不受影响,或者使用正确的术语Specificity 。它指出最精确/特定的情况将是最后一次应用,a:link.active更精确。

您可以使用!important,但优先级规则仍然适用,除非只有一个!important规则...这就是要避免使用IMO,因为它可能会导致后续的副作用。 MDN涵盖了!important的最佳实践:

  

一些经验法则:

     

在考虑之前,始终寻找一种使用特异性的方法   !important

     

仅在重写的特定于页面的CSS上使用!important   外国CSS(来自外部库,如Bootstrap或

     

在你写作时,永远不要使用!important   插件/混搭。

     

永远不要在网站范围内使用!important。

此外,我非常确定您不希望.active的所有内容都像这些链接一样,您可以为页面的活动部分,活动按钮和等等。所以你最好的选择是更精确。在此处的代码段中,我只是在选择器前面添加了a,以使其最精确a.active

&#13;
&#13;
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;
&#13;
&#13;

答案 1 :(得分:0)

背景在&#34;活跃&#34;上不是白色的原因上课,因为优先。 a:visiteda:link的优先级高于.active类。

你可以这样做

&#13;
&#13;
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;
&#13;
&#13;

但是,我不知道为什么会首先使用:link:visited

答案 2 :(得分:0)

&#13;
&#13;
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;
&#13;
&#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; }