zoukankan      html  css  js  c++  java
  • css3--: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;
    }
    

    上面的代码可以对不同的target对象分别设置不的样式。

    我的理解:

    就是通过::target这个选择器让a标签里面的href来控制和href里面名字一样的id相对应的元素

  • 相关阅读:
    CS01、CS02保存时增强的BADI(BOM_UPDATE)
    爱课程网(icourses.cn)的课件下载
    Java获取电脑盘符(最后一个盘符)
    打包后,配置文件找不到,json文件转java 实体对象
    前端vue history模式,后端nginx配置
    springboot 项目整合jsp文件,部署jar包
    安装node.js遇到的问题
    docker
    set up phpmyadmin with docker
    各类网络知识汇总
  • 原文地址:https://www.cnblogs.com/laijinquan/p/7189429.html
Copyright © 2011-2022 走看看