html - 为 div 中的各个元素着色

Question

我正在编写自己的网站，并且 html/css 经验有限，所以请放轻松:)
我使用以下 html 在网页左侧提供一个“菜单”

并使用以下 css 将其向左对齐，以允许另一段标题文本 float 在其右侧

			.links	{
				width: 45%;
				float: left;
				font-size: 2em;
				margin: 0 5%;
				clear: left;
			}
			.links a	{
				text-decoration: none;
				color: black;
				border: 1px solid black;
				padding: 1%;
				display: inline-block;
			}
			.links a:hover	{
				background:lightblue;
			}

<div class="links">
		<a href="index.html"><b><i>Home</i></b></a>
		<a href="services.html"><b><i>Services</i></b></a>
		<a href="contact.html"><b><i>Contact Us</i></b></a>
	</div>

现在，我真的很希望能够为单个链接框着色以显示用户所在的页面，但无法弄清楚如何
我尝试为每个链接添加额外的“div”，但这会导致对齐失败并将链接放在彼此下面
任何帮助将不胜感激，因为我渴望学习:)
非常感谢

Answer 1

您可以将单个类添加到链接，如下所示:

<div class="links">
        <a class="clicked" href="index.html"><b><i>Home</i></b></a>
        <a href="services.html"><b><i>Services</i></b></a>
        <a href="contact.html"><b><i>Contact Us</i></b></a>
    </div>

然后设置此类的样式:

 .clicked{
        background: gray;
}

我鼓励您使用列表进行导航，如下所示:https://jsfiddle.net/o4tcsdmp/2/