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相对应的元素

  • 相关阅读:
    03:矩形分割 (二分)
    09:膨胀的木棍 (二分+角度计算)
    A Cubic number and A Cubic Number (二分) HDU
    B
    08:不重复地输出数 (set)
    10:河中跳房子 (二分)
    07:和为给定数 (二分)
    04:网线主管 (二分)
    河中跳房子
    010:输出前k大的数
  • 原文地址:https://www.cnblogs.com/laijinquan/p/7189429.html
Copyright © 2011-2022 走看看