1.伪类
伪类用来指定HTML元素某个状态下的样式，格式 选择符：伪类{属性：属性值}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>伪类</title>
<style type ="text/css" >
a:link{ text-decoration:none;font-size:50px;/*链接默认状态下的样式*/ }
a:visited{ color:Red;/*链接访问过后的样式*/}
a:hover{ text-decoration:underline; color:Silver;/*鼠标放在链接上时的样式*/}
a:active{ color:Maroon;/*点击链接时的样式*/}
/*设置a伪类的顺序必须按照上面的顺序书写，否则可能无效*/
input:hover{ background-color:#F00;/*鼠标放在输入框时改变背景色*/}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#">伪类</a>可以用来指定选择符在某种状态下的样式,用来增加交互效果而不必使用过多的JavaScript！
<br />
<input type ="text" />
</div>
</form>
</body>
</html>
2.伪对象
伪对象是在在指定的HTML元素之外加上额外的信息，格式： 选择符：伪对象{属性：属性值}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>伪对象</title>
<style type ="text/css" >
p:before{ content:"双十一"; font-weight:bold; }
p:after{ content:"，准备好剁手了吗？"; color:Red;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<b>伪对象可在HTML元素的前面或后面加上额外的信息！</b>
<p>快到了</p>
</div>
</form>
</body>
</html>
原文地址：https://www.cnblogs.com/lidaying5/p/9879683.html
时间： 2024-07-28 18:29:03