使用伪类选择可以为DOM元素添加类样式，但添加的样式在DOM中不可见，所以称为伪类。
常用的伪类选择器有四个
- 选择器:hover --鼠标移动到元素上的样式
- 选择器:link --没有被点击的链接样式
- 选择器:active --鼠标按住时的样式
- 选择器:visited --链接点击后的样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器之伪类选择器--伪造原生DOM类样式</title>
</head>
<style>
/*a:link{color:green;} 正常链接 */
/*a:visited{ color:green;} 链接点击以后 */
a:active{ color:green;} /* 链接按下去 */
a:hover{ /* 鼠标放上去 */
font-size:30px;
}
div:hover{
font-size:50px;
color:green;
}
div:active{
color:blue;
}
/*div:visited{
color:yellow;
}*/
</style>
<body>
<a href="https://www.teamczyx.com">慈众易博网页信息自动发布系统V9</a>
<div>慈众易博网页信息自动发布系统V9一款网页/HTTP协议类全自动辅助操作工具</div>
</body>
</html>
以上代码的效果是动态的，无法截图说明，大家可以把以上代码复制出去，自行测试一下当鼠标移动、点击、离开文字的样式变化。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器之伪类选择器--伪造原生DOM类样式</title>
</head>
<style>
.box{
width:200px;
height:200px;
background:#abcdef;
}
.box:hover .box1{/* 代表鼠标放到.box上，对.box里面的.box1修饰 */
width:300px;
height:300px;
background:#0F0;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
|
窥视卡
雷达卡
发表于 2023-1-31 18:54:25
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-16 03:52:52
