伪类被添加到选择器上，它前面有一个冒号，后跟一个带括号值的属性。伪类的语法如下
selector:pseudo-class{property:value;}
基本伪类
有许多不同的伪类，下面的代码示例演示了一些最基本的伪类。这些被归类为动态伪类，由于用户的操作而改变。在代码示例中，：link伪类用于将链接的颜色设置为蓝色。一旦用户访问了链接，则：visited伪类用于将链接的颜色更改为maroon。还演示了：当用户将鼠标悬停在图像上时，悬停用于将带有白色文本的紫色圆圈更改为带有黄色文本的粉红色正方形。的：重点伪类更改日期输入字段为灰色，当用户点击或在其上“重点”。代码示例在这里为自己尝试一下！
<!DOCTYPEhtml>
<html>
<head>
<style>
a:link{
color:blue;
}
a:visited{
color:maroon;
}
div{
background-color:purple;
color:white;
line-height:90px;
font-size:20px;
text-align:center;
width:200px;
height:200px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
div:hover{
background-color:pink;
color:yellow;
width:200px;
height:200px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
}
input:focus{
background-color:lightgray;
}
</style>
</head>
<body>
<p><b><ahref="https://www.php.cn/"target="_blank">Clickonthislink!</a></b></p>
<div>Hoveroverthis</div>
<p><b>Entertodaysdateinthefieldbelow</b></p>
<form>
Date:<inputtype="text"name="Date"><br>
</form>
</body>
</html>
一些更多的伪类
下面列出了一些更常用的伪类。可在此处找到所有伪类的完整列表。
：first-child-此类允许您将特定样式添加到作为其父元素的第一个子元素的元素。
：root-此伪类用于匹配文档的根元素。
：lang-不同的语言有不同的规则和惯例。有时您需要创建多种语言使用的页面。：lang伪类对于这种情况很有用。它主要查看lang=“”HTML属性和<meta>元素，并相应地匹配元素。
：disabled-这允许您指示禁用的输入元素，如文本字段和按钮。
：fullscreen-此伪类使用处于全屏模式的元素。
伪元素
伪元素具有与伪类类似的功能，因为它们可以由CSS设置样式并由用户代理添加。但是它们与伪类不同，因为它们允许您使用DOM中不存在的元素。伪元素的语法标识符通常是双冒号，而不是像伪类一样的单冒号。常见的伪元素是::before，::after和::first-line。重要的是要注意一些编码器使用单个冒号：对于伪元素，这是CSS2中的惯例。请记住这一点，以避免伪类和伪元素之间的混淆。
最后
伪类可以使得特殊状态应用于元素。它们允许开发人员创建很酷的效果，而无需使用JavaScript等脚本语言。有许多不同类型的伪类，使您可以在保持代码简单的同时使页面更具交互性和趣味性。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56713.shtml
