链接的默认颜色不会改变

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>