个人中心
gpt4 book ai didi

html - 链接控件不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 16:10:23 26 4
gpt4 key购买 nike

我试图控制“显示更多”链接但不能，我以前使用过链接控件，但这个让我感到困惑。到目前为止，我试图控制的链接是 #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>

最佳答案

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

#r_a_show_more_link:visited {
    color: black;
}

关于html - 链接控件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35299932/

26 4 0
文章推荐： html - 多个行 block 元素
文章推荐： javascript - 解锁索引数据库
文章推荐： c++ - Opengl 3.3 不绘制任何东西。使用 GLSL 330 核心
文章推荐： css - Stylesheet_link_tag 已损坏，文件路径不起作用，我这辈子都想不通为什么。有任何想法吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com