着色div

Question

我正在编写自己的网站并且有限制的html / css体验，所以请放轻松我:) 我正在使用以下html在我的网页lhs上给我一个“菜单”

并使用以下css将其对齐到左侧以允许另一段标题文本浮动在此的rhs上

			.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/

Answer 2

像这样......

方法1：按子位置选择

.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.links>a:nth-child(1){
	background-color:yellow;
	color:red;
}
div.links>a:nth-child(2){
	background-color:cyan;
	color:green;
}
div.links>a:nth-child(3){
	background-color:pink;
	color:blue;
}

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

方法2：按特定属性选择

.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;
}
a[href='index.html']{
	background-color:yellow;
	color:red;
}
a[href='services.html']{
	background-color:cyan;
	color:green;
}
a[href='contact.html']{
	background-color:pink;
	color:blue;
}

<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>a:nth-child(3)选择div的{​​{1}}子项，且仅限于{3}位置。

a选择具有a[href='services.html']属性的a元素。

详细了解css selectors