The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

HTML:

<body>

    <a href="#tab1">Tab 1</a><a href="#tab2">Tab 2</a><a href="#tab3">Tab 3</a>

    <div id="tab1" class="tab">

        <h1>Tab 1 Content</h1>

    </div>

    <div id="tab2" class="tab">

        <h1>Tab 2 Content</h1>

    </div>

    <div id="tab3" class="tab">

        <h1>Tab 3 Content</h1>

    </div>

</body>

CSS:

    <style>

        .tab{

            display: none;

        }

        .tab:target {

            display: block;

        }

    </style>

[CSS3] CSS :target Selector的更多相关文章

  1. [CSS] :not Selector

    The CSS :not() selector allows us to exclude a subset of elements matched by our selector. In this e ...

  2. CSS3 & CSS var & :root

    CSS3 & CSS var & :root How to change CSS :root color variables in JavaScript https://stackov ...

  3. 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  4. [CSS] Target empty elements using the :empty pseudo-class

    You can target an element that has no child elements by using the :empty pseudo-class. With browser ...

  5. [CSS3] CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

  6. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  7. css :target

    花了半小时在找如果完成:target的问题 需求:点击<a href="#Main">Main</a>时,会触发:target 效果 结果在网络上没有找到, ...

  8. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  9. [CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes

    Learn how to target elements based on their position inside of a parent element in relation to its s ...

随机推荐

  1. javascript——可以判断值的类型的函数

    function classof(o){ return Object.prototype.toString.call(0).slice(8,-1); } Function.prototype.getN ...

  2. stat 的名字接口

    File::stat - stat 的名字接口 名字为:dev, ino, mode, nlink, uid, gid, rdev, size, atime, mtime, ctime, blksiz ...

  3. 安装freebsd9 出现 mountroot>怎么办

    之前手欠把linux分区给删了想重装freebsd 重新进入的时候mbr提示grub信息 用PE把MBR删掉 之后再用freebsd光盘启动出现mountroot> 就用mountroot> ...

  4. dedecms 发布文章时，关键字会自动加内链

    在后台找到:核心->批量维护->文档关键词维护 把关键字和链接网址删掉就可以了,生成更新后前端页面就不会再链接了.>_<.

  5. Win8.1 64bit安装Genymotion模拟器

    其实安装并不复杂,只要环境正常,此事并不难.但估计最坏的情况都被我撞上了,才折腾了差不多一天的 那我有哪些环境不正常呢? 破解了系统主题 Device Install Service服务未启动 下面来 ...

  6. openerp import namespace

    # If True, the Python modules inside the openerp namespace are made available# without the 'openerp. ...

  7. Rewrite的QSA是什么意思?

    原版的英文: When the replacement URI contains a query string, the default behavior of RewriteRule is to d ...

  8. 项目任务管理（TaskMgr）技术篇

    判定是否为枚举型:type.IsEnum 应用原型:如果是枚举返回字符型,如果是其他类型直接返回: object value = pro1.FieldType.IsEnum ? pro1.GetVal ...

  9. MySql拾遗

    1.“1130-Host is not allowed to connect to this MySQL server” 满世界的人都告诉你,到user表中把root + localhost的“loc ...

  10. 转:PHP非阻塞模式

    你可以任意转摘“PHP非阻塞模式”,但请保留本文出处和版权信息.作者:尘缘,QQ:130775,来源:http://www.4wei.cn/archives/1002336 让PHP不再阻塞当PHP作 ...