css伪类是什么？css伪类的简单介绍（附示例）-css教程-PHP中文网

首页

web前端

css教程

css伪类是什么？css伪类的简单介绍（附示例）

不言

Nov 02, 2018 am 10:08 AM

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属性和元素，并相应地匹配元素。

：disabled- 这允许您指示禁用的输入元素，如文本字段和按钮。

：fullscreen- 此伪类使用处于全屏模式的元素。

伪元素

伪元素具有与伪类类似的功能，因为它们可以由CSS设置样式并由用户代理添加。但是它们与伪类不同，因为它们允许您使用DOM中不存在的元素。伪元素的语法标识符通常是双冒号，而不是像伪类一样的单冒号。常见的伪元素是:: before ，:: after 和:: first-line 。重要的是要注意一些编码器使用单个冒号：对于伪元素，这是CSS2中的惯例。请记住这一点，以避免伪类和伪元素之间的混淆。

最后

伪类可以使得特殊状态应用于元素。它们允许开发人员创建很酷的效果，而无需使用JavaScript等脚本语言。有许多不同类型的伪类，使您可以在保持代码简单的同时使页面更具交互性和趣味性。

以上是css伪类是什么？css伪类的简单介绍（附示例）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn