zoukankan      html  css  js  c++  java
  • CSS3 target伪类简介

     

     

    CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的。

    现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

    浏览器支持

    因为我们在讨论CSS3,所以它现在被除了IE6-8以外的所有浏览器支持,但是IE9会支持这个伪类。这是相当遗憾的,但是这个现实并不影响你使用它。

    如何使用:target

    :target伪类和:hover、:link、:visited、:focus等伪类的用法是一样的:

    1
    2
    3
    4
    
    selector:target{
    color:red;
    /*other styles*/
    }

    实例

    让我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab,之前我们要用脚本来实现,YUI、jQuery也都有这样的插件或者模块,但是现在我们用:target伪类就可以实现。

    HTML结构:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <ul class="tabs">
    	<li><a href="#tab1">标签一</a></li>
    	<li><a href="#tab2">标签二</a></li>
    	<li><a href="#tab3">标签三</a></li>
    </ul>
    <div id="tab1" class="tab_content">
    <!--tabed content--></div>
    <div id="tab2" class="tab_content">
    <!--tabed content--></div>
    <div id="tab3" class="tab_content">
    <!--tabed content--></div>

    CSS3代码:

    1
    2
    3
    4
    5
    6
    7
    8
    
    /*layout styles*/
    .tab_content {
    	position: absolute;/*set content box as absolute*/
    	/*other layout styles*/
    }
    #tab1:target, #tab2:target, #tab3:target {
    	z-index: 1;
    }

    原理想必大家都看懂了,就是将tab内容框设置为绝对定位,然后通过:target伪类调整其z-index。

    这里是个demo页面

    具体用法就是这么简单,在实际项目中大家就可以随意发挥了 :)

    <a href="#要匹配的ID">按钮</a>

    <div id="要匹配的ID"></div>

    要匹配的ID:target { CSS样式}

    就是这种用法- -CSS样式随便改 就能做出各种动画效果

  • 相关阅读:
    Python3 WebDriver操作cookie的方法
    Windows创建定时任务执行Python脚本
    Python3 自定义请求头消息headers
    为什么SQL用UPDATE语句更新时更新行数会多3行有触发器有触发器有触发器有触发器有触发器有触发器
    【C#】C#获取文件夹下的所有文件
    jQuery.ajax()调用asp.net后台方法(非常重要)
    Asp.Net+JQuery.Ajax之$.post
    c# post 接收传来的文件
    C#使用GET、POST请求获取结果,这里以一个简单的用户登陆为例。
    javascript中let和var的区别
  • 原文地址:https://www.cnblogs.com/cd-snoopy/p/3751507.html
Copyright © 2011-2022 走看看