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>