zoukankan      html  css  js  c++  java
  • CSS3 :target伪类的理解与使用

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue}

    浏览器支持:

    不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox、Chrome、等这些浏览器都支持。

    用法:

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

    :target {color:blue}

    实例:CSS3 :target伪类实现Tab切换效果

    下面简单介绍下如何用csse :target来制作一个无JavaScript的tab切换效果

    HTML代码:

    <div class="tablist"> <ul class="tabmenu"> <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">tab1 content</div> <div id="tab2" class="tab_content">tab2 content</div> <div id="tab3" class="tab_content">tab3 content</div> </div> 

    CSS代码:

    .tab_content {
    	position: absolute;
    }
    #tab1:target, #tab2:target, #tab3:target {
    	z-index: 1;
    }

    原理其实很简单,就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级(z-index)。

  • 相关阅读:
    git学习笔记
    angular自定义指令-1
    转 三范式
    CentOS 7 安装NVIDIA驱动实现修改分辨率和扩屏功能
    acm 2034
    acm 2031
    记票统计
    acm 2020 map 逆向输出
    acm 2014
    将输入的字符一个一个读入
  • 原文地址:https://www.cnblogs.com/koleyang/p/5478039.html
Copyright © 2011-2022 走看看