人亦已歌 发表于 2023-1-31 18:54:25

CSS核心(九)复合选择器之伪类选择器--伪造原生DOM类样式

使用伪类选择可以为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-2-16 03:52:52

太好了.

老大徒伤悲 发表于 2023-2-23 11:14:50

在其他地方看到过,很受欢迎的一篇文章在其他地方看到过,很受欢迎的一篇文章这个吗~学校就是这个样子的啦~、大多数还是靠自己,,,,,,,。。。。。。。。。算了~反正我也是个菜鸟,。,,,没资格说些什么~、看了你的文章,真有点感触·

285357683 发表于 2023-2-28 02:53:14

让我又有了奋斗精神

浪缘 发表于 2023-3-4 17:14:52

写的很好,让我感触颇深,我是一个即将毕业的大四学生,我虽然不是计算机系的,但是我很喜欢编程,真是学海无涯啊!真的很好,谢谢!这是我们大多数编程序人的心声,佩服!

songcool 发表于 2023-3-11 10:25:04

我一定会比以前更加努力我的理想是成为一个优秀的程序员   

qiuhuantu 发表于 2023-3-17 14:21:59

为什么那么多人还是没有领会事情的真正含义,就是人家说的,cpu不是为你服务的,为什么那么简单的问题要为pc解决,其实我们太拘泥与编程,而忘了人的能动性,那是你高中常做的是,就是小学生可能都解决。人人都有内在的局限性。即使是你是高手。

东门秀才 发表于 2023-3-22 08:04:18

看你的文章,真的挺受益啊~~~我以后一定要努力!

迟来的爱 发表于 2023-3-26 02:43:01

我是个新手,看了此文章让我感触良深,更给了我学习的动力.我是学医的,现大二,不过我更喜欢的是电脑,同学那我找不到有共同爱好的,在这里好多知音啊!我是一个刚进不入高校的大门,看后受到很大的启发!~每天看8页编程书,看几遍论坛的文章,再加上几道练习,相信同学4年后毕业的技术应该跟我差不多!~

phoenixz 发表于 2023-3-29 19:19:57

真的, 这让我看了感触也很深,thank you very much!!!!!!!!考官的方法真的很简单,相信谁都看的懂. 但是真正又有几个人能写的出来那样的呢??高!
页: [1] 2 3 4
查看完整版本: CSS核心(九)复合选择器之伪类选择器--伪造原生DOM类样式