链接的默认颜色不会改变

Question

我知道这是一个基本问题，但是我无法更改链接的颜色，所以请您帮我。 在这段代码中，我通常会看到一部小电影，上面有描述/超链接到我的网站页面
（先是CSS，然后是HTML）

 /* Style the video: 100% width and height to cover the entire window */
#myVideo {
	top:100px;
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
	font-family:Century Gothic;
}

/* Style the button used to pause/play the video */
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	font-family:Century Gothic;
	font-size:25px;
}

#myBtn:hover {
    background: #ddd;
    color: black;
} 
#links:link		{
	
    color:inherit;
	text-decoration:none;
	transition:color 1s;
}
#links:hover	{
	color:white;
}

<div class="main">

		<!-- The video -->
	<video autoplay muted loop id="myVideo">
		<source src="vid/test.mp4" type="video/mp4">
	</video>

		<!-- Optional: some overlay text to describe the video -->
	<div class="content">
		<h1>La Team en action!</h1>
		<p>Viens voir toute la team NoMaD en action! Disponible sur <span id="links"><a href="https://www.youtube.com/channel/UCx9wXRznZvavCSXkbrJoDYw?view_as=subscriber">YouTube</a></span>, <span id="links"><a href="https://www.twitch.tv/teamn0mad">Twitch</a></span>, et  <span id="links"><a href="https://www.instagram.com/la_team_nomad">Insta</a></span>.</p>
		<!-- Use a button to pause/play the video with JavaScript -->
			<button id="myBtn" onclick="location.href = 'contact.html';">Réseaux</button>
</div> 
</div>

请帮助我！我必须学习基础知识……（我已经在其他Tutos中看到了，但这是行不通的……）。

Answer 1

您需要将此样式应用于<a>标签，而不是<span>。但更重要的是，您使用了两次相同的links ID，这是不合法的。改为将其更改为类：

<p>Viens voir toute la team NoMaD en action! Disponible sur <span id="links"><a href="https://www.youtube.com/channel/UCx9wXRznZvavCSXkbrJoDYw?view_as=subscriber">YouTube</a></span>, <span class="links"><a href="https://www.twitch.tv/teamn0mad">Twitch</a></span>, et  <span class="links"><a href="https://www.instagram.com/la_team_nomad">Insta</a></span>.</p>

然后将您的CSS更改为在此类上选择，而不是ID：

.links a {
    color:inherit;
    text-decoration:none;
    transition:color 1s;
}

.links a:hover {
    color:white;
}

Answer 2

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
	top:100px;
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
	font-family:Century Gothic;
}

/* Style the button used to pause/play the video */
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	font-family:Century Gothic;
	font-size:25px;
}

#myBtn:hover {
    background: #ddd;
    color: black;
} 
#links:link		{
	
    color:inherit;
	text-decoration:none;
	transition:color 1s;
}
#links:hover	{
	color:white;
}
a{color:white;}

<div class="main">

		<!-- The video -->
	<video autoplay muted loop id="myVideo">
		<source src="vid/test.mp4" type="video/mp4">
	</video>

		<!-- Optional: some overlay text to describe the video -->
	<div class="content">
		<h1>La Team en action!</h1>
		<p>Viens voir toute la team NoMaD en action! Disponible sur <span id="links"><a href="https://www.youtube.com/channel/UCx9wXRznZvavCSXkbrJoDYw?view_as=subscriber">YouTube</a></span>, <span id="links"><a href="https://www.twitch.tv/teamn0mad">Twitch</a></span>, et  <span id="links"><a href="https://www.instagram.com/la_team_nomad">Insta</a></span>.</p>
		<!-- Use a button to pause/play the video with JavaScript -->
			<button id="myBtn" onclick="location.href = 'contact.html';">Réseaux</button>
</div> 
</div>