CSS 伪元素选择器

最新推荐文章于 2023-04-01 11:47:41 发布

Aseveng

最新推荐文章于 2023-04-01 11:47:41 发布

阅读量503

点赞数

分类专栏：网页前端

本文链接：https://blog.csdn.net/Aseveng/article/details/78424470

版权

网页前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>


<style>
/*
在html中预先定义好一些选择器 称为称为伪元素

伪元素

超链接的状态
*/
/* 未访问*/
a:link{
	background-color:#060;
	color:#033;
	text-decoration:none;
	font-size:18px;
	
}
p:first-letter{
	font-size:36px;
	color:#F00
}
/*鼠标悬停*/
a:hover{
	background-color:#C96;
	color:#999;
	font-size:24px;
}
/*点击效果*/
a:active{
	background-color:#000;
	color:#FFF;
	font-size:36px;
}
/*访问后效果*/
a:visited{
	background-color:#090;
	color:#033;
	text-decoration:line-through;
}
div:hover{
	background-color:#F00;
	color:#FFF;
}
input:fouce{
	background-color:#006;
}
/*
一般顺序
L V H A
*/
</style>



</head>




<body>
<input type="text"/>
<input type="txet"/><br/>
<a href="http://www.sina.com.cn"  target="_blank">伪元素选择器演示</a>
<hr/>
	
	<div id="qq"><b>这是一个div区域1</b> </div>
    <div  class="haha">这是一个div区域2</div>  
      
    <span>span<b>区域</b>1</span>  
    <span class="haha">span2</span>  
      
    <p class="hehe">这是一个段落1</p>  
    <p>这是一个段落1</p>



</body>
</html>