Question

未显示活动链接类的背景颜色。边框变为虚线，但颜色不变。到底是怎么回事？我是css的新手，有点沮丧。请帮忙！哦，颜色也不起作用。我只是这样做来测试它。我真的不想在白色背景上写白色文字。

＆＃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;
    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;

Answer 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。

＆＃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;

Answer 2

背景在＆＃34;活跃＆＃34;上不是白色的原因上课，因为优先。 a:visited和a:link的优先级高于.active类。

你可以这样做

＆＃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;

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

Answer 3

＆＃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;

Answer 4

试试这个。它会帮助你

如果您想要更改“字体颜色”，请使用

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

Answer 5

与其他人在不使用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; }

链接的背景颜色不起作用

5 个答案: