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;
    }
    
  • 相关阅读:
    关于HTTP以及TCP
    .NetCore表单提交文件
    C# Out变量
    .NET Core 网络数据采集 -- 使用AngleSharp做html解析
    C# 根据Url下载文件/获取文件流
    C# 模拟表单提交
    C# 获取Url路径的参数信息
    C# 采集页面数据
    .net core 3.1 设置可跨域
    C# json字符串转化成Dictionary
  • 原文地址:https://www.cnblogs.com/beast-king/p/4477254.html
Copyright © 2011-2022 走看看