小小编详细介绍一下css伪类是什么-爱站

CSS伪类使您能够以特定状态分配给元素。例如，用户将鼠标悬停在网页上的图像上，将其更改为另一个图像。链接在访问后更改颜色，并与未访问的链接区分开来。表单的输入框将被禁用，没有值。伪类可以完成这些任务和更多的任务。普通CSS类也可以与伪类一起使用。

CSS3添加了比以前CSS2中更多的伪类。（推荐课程：css3视频教程）

伪类被添加到选择器上，它前面有一个冒号，后跟一个带括号值的属性。伪类的语法如下

selector: pseudo-class { property:value;}

基本伪类

有许多不同的伪类，下面的代码示例演示了一些最基本的伪类。这些被归类为动态伪类，由于用户的操作而改变。在代码示例中，：link 伪类用于将链接的颜色设置为蓝色。一旦用户访问了链接，则：visited 伪类用于将链接的颜色更改为maroon。还演示了：当用户将鼠标悬停在图像上时，悬停用于将带有白色文本的紫色圆圈更改为带有黄色文本的粉红色正方形。的：重点伪类更改日期输入字段为灰色，当用户点击或在其上“重点”。代码示例在这里为自己尝试一下！

<!DOCTYPE html>
<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><a href="https://www.php.cn/" target="_blank">Click on this link!</a></b></p>
<div>Hover over this</div>
<p><b>Enter todays date in the field below</b></p>
<form>
Date: <input type="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)即可创建精彩的效果。有多种类型的伪类，可以在保持代码简单的同时使页面更加交互和有趣。

文章版权归作者所有，未经允许请勿转载。

THE END