Question

我正在尝试控制“显示更多”链接而不能，我之前使用过链接控件，但这个让我感到困惑。到目前为止，我试图控制的链接是#r_a_show_more_link（最近活动下的“显示更多”链接）它的代码位于CSS的底部，但我无法使其工作。也许我在CSS选择器上做错了什么？请查看代码并运行代码段！

非常感谢！

/* Main Nav */
	#home_icon {
		height: 40px;
		float: left;
		padding: 10px;
		position: relative;
		top: 95px;
	}

	li {
		display: inline-block;
	}

	ul {
		float: right;
		position: relative;
		top: 50px;
		margin: 0px;
		padding: 0px;
	}

	li a:link {
		font-weight: bold;
		display: inline-block;
		text-decoration: none;
		font-family: times;
		font-size: 24px;
		list-style: none;
		padding: 5px;
		margin: 3px;
		margin-top: 0px;
		border: 2px solid #000;
		border-radius: 5px;
	}

	nav li a:visited {
		color: black;
	}

	nav li a:hover {
		color: gray;
		border-color: gray;
	}

	nav li a:active {
		color: black;
		border-color: black;
	}

	nav {
		width: 1000px;
		height: 150px;
		background-color: rgba(255,255,255,0.9);
		padding: 10px;
		margin: 0px auto;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	input[type=search] {
		font-size: 16px;
	}

	#searchbox {
		float: right;
		margin: 15px;
		display: inline-block;
		background: #2b303b;
		border: none;
		color: #63717f;
		border-radius: 5px;
	}
	#logo {
		float: left;
		height: 150px;
		display: inline-block;
	}

body {
    background-image: url("../pictures/test.jpg");
    background-color: blue;
	min-height: 500px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0px;
	padding: 0px;
}

aside {
	position: absolute;
	right: 0px;
	background-color: rgba(255,255,255,0.9);
	width: 170px;
	height: 600px;
	margin: 0;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 10px;
}

#main_content {
	width: 1000px;
	min-height: 600px;
	display: block;
	background-color: rgba(255,255,255,0.9);
	margin: 0 auto;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	position: relative; top: 0px;
	padding: 10px;
}

#here_you_can_learn {
	font-size: 47px;
	color: gray;
	margin: 0 auto;
	margin-bottom: 10px;
	text-align: center;
}

#welcome {
	color: white;
	font-size: 130px;
	margin-top: 20px;
	margin-bottom: 10px;
	text-align: center;
	padding: 10px;
}

#down_arrow {
	height: 50px;
	margin: auto;
	display: block;
	padding: 10px;
}

#most_frequent {
	width: 600px;
	vertical-align: top;
	display: inline-block;
	background-color: rgba(0,0,0,0.1);
	border-radius: 3px;
}

#m_f_heading {
	font-size: 30px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}



#m_f_show_more {
	font-size: 20px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}


#recent_activity {
	width: 375px;
	display: inline-block;
	background-color: rgba(0,0,0,0.1);
	border-radius: 3px;
}

#r_a_heading {
	font-size: 30px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}

#r_a_body {
	font-size: 15px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}

#r_a_show_more {
	font-size: 20px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}

#r_a_show_more_link :visited {
		color: black;
	}

#r_a_show_more_link :hover {
		color: gray;
		border-color: gray;
	}

#r_a_show_more_link :active {
		color: black;
		border-color: black;
	}
}

<!DOCTYPE html>

<head>
<title>Home | Jeff's Website</title>

<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />

</head>


<body>

<!--Main Nav-->
<header>
	<nav>
		<a href="">
			<img id="logo" src="pictures/jeff_logo.png" alt="Logo">
		</a>
		
		<a href=""><img src="pictures/home_icon.png" id="home_icon"/></a>

		<form action="" id="searchbox">
			<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
  			<input type="submit" value="Search!">
		</form>
		
		<ul>
			<li><a href="">Blog</a></li>
			<li><a href="">Trips</a></li>
			<li><a href="">Politics</a></li>
			<li><a href="">Pictures</a></li>
			<li><a href="">Videos</a></li>
			<li><a href="">Computer</a></li>
			<li><a href="">Misc</a></li>
		</ul>
	</nav>
</header>


<!--Welcome to jeff's website-->

<div>
	<h1 id="welcome">Welcome to </br> my website!</h1>
	<a href="#here_you_can_learn">
	<img src="pictures/down_arrow.png" id="down_arrow"/>
	</a>
</div>

<!--right side nav-->

<aside>
	<p>this is aside</p>

</aside>


<!--Main Content-->

<div id="main_content">
	<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>

<!--Most Frequently visited pages: on left side of page-->
	<div id="most_frequent">
		<p id="m_f_heading">Most frequently visted pages!</p>
		
		
		
		<a href="" id="m_f_show_more_link"><p id="m_f_show_more">Show More</p></a>
	
	</div>
	
<!--Recent Activity: on the right side of page-->
	<div id="recent_activity">
		<p id="r_a_heading">Recent Activity</p>
		
		
		<p id="r_a_body">test</p>
		
		
		<a href="" id="r_a_show_more_link"><p id="r_a_show_more">Show More</p></a>
	</div>

</div>

</body>

Answer 1

您需要删除CSS中:visited之前的空格：

#r_a_show_more_link:visited {
    color: black;
}

Answer 2

您在:hover，:visited和:active之前有一个额外的空格，请将其删除，如下所示：

#r_a_show_more_link:visited {
 color: black;
}
#r_a_show_more_link:hover {
  color: gray;
  border-color: gray;
}
#r_a_show_more_link:active {
  color: black;
  border-color: black;
}

链接控件不起作用

2 个答案: