CSS伪类

最新推荐文章于 2025-06-08 14:44:46 发布

原创最新推荐文章于 2025-06-08 14:44:46 发布 · 477 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #伪类

CSS3 同时被 2 个专栏收录

27 篇文章

订阅专栏

CSS 实例

22 篇文章

订阅专栏

添加不同颜色的超链接

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			a:link {color:#000000;}
			a:visited {color:#00FF00;}
			a:hover {color:#FF00FF;}
			a:active {color:#0000FF;}
		</style>
	</head>
	<body>
		<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
		<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
		<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
	</body>
</html>

给超链接添加其他样式

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			a.one:link{color:#ff0000;}
			a.one:visited {color:#0000ff;}
			a.one:hover {color:#ffcc00;}
			
			a.two:link {color:#ff0000;}
			a.two:visited {color:#0000ff;}
			a.two:hover {font-size:150%;}
			
			a.three:link {color:#ff0000;}
			a.three:visited {color:#0000ff;}
			a.three:hover {background:#66ff66;}
			
			a.four:link {color:#ff0000;}
			a.four:visited {color:#0000ff;}
			a.four:hover {font-family:Georgia, serif;}
			
			a.five:link {color:#ff0000;text-decoration:none;}
			a.five:visited {color:#0000ff;text-decoration:none;}
			a.five:hover {text-decoration:underline;}
		</style>
	</head>
	<body>
		<p>将鼠标移至链接上改变样式.</p>

		<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
		<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
		<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
		<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
		<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
	</body>
</html>

使用：焦点

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			input:focus
			{
				background-color:yellow;
			}
		</style>
	</head>
	<body>
		<form action="demo-form.php" method="get">
		First name: <input type="text" name="fname" /><br>
		Last name: <input type="text" name="lname" /><br>
		<input type="submit" value="提交" />
		</form>
		
		<p><b>注意:</b>仅当 !DOCTYPE 已经声明时 IE8 支持 :focus.</p>
	</body>
</html>

：firset-child-匹配了第一个p元素

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			p:first-child
			{
				color:blue;
			} 
		</style>
	</head>
	<body>
		<p>This is some text.</p>
		<p>This is some text.</p>
		<p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经声明.</p>
	</body>
</html>

：firset-child-匹配了第一个p元素中的I元素

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			p > i:first-child
			{
				color:blue;
			} 
		</style>
	</head>
	<body>
		<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
		<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
		<p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经定义.</p>
	</body>
</html>

：firset-child-匹配了第一个p元素中的所有I元素

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			p:first-child i
			{
				color:blue;
			} 
		</style>
	</head>
	<body>
		<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
		<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
		<p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
	</body>
</html>

使用：lang

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			q:lang(no)
			{
				quotes: "~" "~";
			}
		</style>
	</head>
	<body>
		<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
		<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
		<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
	</body>
</html>

参考：

https://www.yuque.com/docs/share/57cc1245-0adf-411d-a614-3098f8cfe763