zoukankan      html  css  js  c++  java
  • CSS3---结构性伪类选择器—target

    结构性伪类选择器—target

    :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子,然后再做分析。

    示例展示

    点击链接显示隐藏的段落。

    HTML代码:

    <h2><a href="#brand">Brand</a></h2>
    <div class="menuSection" id="brand">
        content for Brand
    </div>

    CSS代码:

    .menuSection{
      display: none;
    }
    :target{/*这里的:target就是指id="brand"的div对象*/
      display:block;
    }

    演示结果:

    分析:

    1、具体来说,触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand

    2、:target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。

    多个url(多个target)处理:

    就像上面的例子,#brand与后面的id="brand"是对应的,当同一个页面上有很多的url的时候你可以取不同的名字,只要#号后对的名称与id=""中的名称对应就可以了。
    如下面例子:
    html代码:  

    <h2><a href="#brand">Brand</a></h2>
    <div class="menuSection" id="brand">
      content for Brand
    </div>
    <h2><a href="#jake">Brand</a></h2>
    <div class="menuSection" id="jake">
     content for jake
    </div>
    <h2><a href="#aron">Brand</a></h2>
    <div class="menuSection" id="aron">
        content for aron
    </div>
    

    css代码:

    #brand:target {
      background: orange;
      color: #fff;
    }
    #jake:target {
      background: blue;
      color: #fff;
    }
    #aron:target {
      background: red;
      color: #fff;
    }
    
  • 相关阅读:
    .NET5微服务示例-Ocelot网关
    .NET5微服务示例-Polly熔断与降级
    .NET5微服务示例-Consul注册中心
    .NET下使用ELK日志中心
    [ 题解 ] [ 数学 ] [ JZOJ5809 ] 数羊
    [ 题解 ] [ 数学 ] 函数 (sequence) (欧拉函数)
    [ 题解 ] [ JZOJ5777 ] 小 x 玩游戏
    更换谷歌浏览器视频输入源
    axios 封装及 API 接口管理
    小程序代码压缩实践
  • 原文地址:https://www.cnblogs.com/beast-king/p/4477254.html
Copyright © 2011-2022 走看看