css伪类使用实例分析
本篇内容介绍了“css伪类使用实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
伪类被添加到选择器上，它前面有一个冒号，后跟一个带括号值的属性。伪类的语法如下
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中的惯例。请记住这一点，以避免伪类和伪元素之间的混淆。
“css伪类使用实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
