常用的动态伪类选择器功能和应用

最新推荐文章于 2023-03-18 09:02:08 发布

ssh6666

最新推荐文章于 2023-03-18 09:02:08 发布

阅读量184

点赞数 1

分类专栏：初学者文章标签： css css3

本文链接：https://blog.csdn.net/ssh6666/article/details/104980834

版权

初学者专栏收录该内容

22 篇文章 0 订阅

订阅专栏

常用的动态伪类选择器功能和应用

E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用
于链接描点上
E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用
于链接描点上
E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支
持a:hover
E:focus
用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点
E:active
用户行为选择器，用户在点击连接，鼠标按下的这一段时间所处的状态
E:target
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

我们常会用hover和target，来进行一些动画效果，案例如下：
这是hover的运用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            img{display: block;}
            .box{
                width: 400px;
                height: 500px;
                /* background: pink; */
                margin: 100px;
                border:10px solid #ccc;
                position:relative;
                overflow:hidden;
            }
            .box img{
                width: 500px;
                height: 100%;
                transition:1s;
            }
 
            .txt2,.txt3,.txt4{
                position:absolute;
                color:#000000;
                left:-160px;
            }
            .txt1{
                position:absolute;
                color:#fff;
                top:50px;
                left:-190px;
                font-size:30px;
                font-weight:bold;
                transition:0.4s;
            }
            .txt2{
                top:150px;
               transition:0.5s;
            }
            .txt3{
                top:200px;
                transition:2s;
            }
            .txt4{
                top:250px;
                transition:3s;
            }
            /*添加交互效果*/
            .box:hover p{
                left:50px;
            }
            .box:hover img{
                margin-left:-20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="./img/9.png" alt="" />
            <p class="txt1">Taylor Swift</p>
            <p class="txt2">Birthday:1989.12.13</p>
            <p class="txt3">Birthday:1989</p>
            <p class="txt4">Birthday</p>
        </div>
    </body>
</html>

在这里插入图片描述
鼠标移动上图片后

这是target的运用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_1702221_gyyvpbw58jn.css" />
        <style type="text/css">
            *{margin: 0;padding: 0;}
			
           .box1{
			   height: 50px;
			   width: 100px;
			   background: black;
			   text-align: center;
			   line-height: 50px;
			  
		   }
		   li{
		   			   height: 40px;
		   			   background: #0073B3;
		   }
		   ul{
			   height: 0;
			   overflow: hidden;
			    transition: 1s;
		   }
		   a{
			   display: inline-block;
			   height: 40px;
			   width: 100px;
			   text-decoration: none;
			   color: white;
		   }
		   .box1:target ul{
			   height: 1000px;
		   }
		   li:hover a{
			   height: 40px;
			   color: red;
			   background: white;
		   }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1" id="box1">
                <a href="#box1" class="iconfont icon-fenlei">
                   商品分类
                </a>
            <ul>
            	<li ><a href="" class="iconfont icon-jiafangjiashi">11111</a></li>
            	<li><a href=""  class="iconfont icon-weibiaoti1">222</a></li>
            	<li ><a href="" class="iconfont icon-lingshi">333</a></li>
            	<li ><a href="" class="iconfont icon-kouhong">333</a></li>
            	<li ><a href="" class="iconfont icon-xiezi">444</a></li>
            	<li ><a href="" class="iconfont icon-zuanshi">555</a></li>
            	<li ><a href="" class="iconfont icon-shuiguo">666</a></li>
            	<li > <a href="" class="iconfont icon-tubiao-">777</a></li>
            	<li ><a href="" class="iconfont icon-tushu">888</a></li>
            	<li ><a href="" class="iconfont icon-chuju">999</a></li>
            	<li ><a href="" class="iconfont icon-yifu">10</a></li>
            	<li ><a href="" class="iconfont icon-zu">11</a></li>
            	<li ><a href="" class="iconfont icon-yingerche">12</a></li>
            	<li ><a href="" class="iconfont icon-qiche">12</a></li>
            </ul>
			</div>
			</div>
    </body>
</html>