• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • :target

    版本:CSS3

    :targetCSS 伪类,代表一个唯一的页面元素(目标元素),其id 与当前URL片段匹配。

    语法:

    E:target{sRules}

    匹配相关URL指向的E元素。解释:URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(targetelement),:target选择器用于选取当前活动的目标元素。

    例如,以下URL拥有一个片段(以#标识的),该片段指向一个ID为section2的页面元素:

    http://www.example.com/index.html#section2

    若当前URL等于上面的URL,下面的元素可以通过:target选择器被选中:

    <section id="section2">example</section>

    浏览器支持

    IE9+以及新版浏览器都支持:target

    例子

    :target伪类可用于加亮显示页面中可从表格内容中链接到的部分。

    //html
    
    <h3>table of contents</h3>
    <ol>
     <li><a href="#p1">jump to the first paragraph!</a></li>
     <li><a href="#p2">jump to the second paragraph!</a></li>
     <li><a href="#nowhere">this link goes nowhere,
       because the target doesn't exist.</a></li>
    </ol>
    
    <h3>my fun article</h3>
    <p id="p1">you can target <i>this paragraph</i> using a
      url fragment. click on the link above to try out!</p>
    <p id="p2">this is <i>another paragraph</i>, also accessible
      from the links above. isn't that delightful?</p>
    
    //CSS
    
    p:target {
      background-color: gold;
    }
    
    /* 在目标元素中增加一个伪元素*/
    p:target::before {
      font: 70% sans-serif;
      content: "►";
      color: limegreen;
      margin-right: .25em;
    }
    
    /*在目标元素中使用italic样式*/
    p:target i {
      color: red;
    }
    

    你可以不使用任何Javascript代码,只使用:target伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位,CSS就会更改其display以便显示它们。

    //html
    
    <ul>
      <li><a href="#example1">open example #1</a></li>
      <li><a href="#example2">open example #2</a></li>
    </ul>
    
    <div class="lightbox" id="example1">
      <figure>
        <a href="#" class="close"></a>
        <figcaption>lorem ipsum dolor sit amet, consectetur adipiscing elit.
          donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
      </figure>
    </div>
    
    <div class="lightbox" id="example2">
      <figure>
        <a href="#" class="close"></a>
        <figcaption>cras risus odio, pharetra nec ultricies et,
          mollis ac augue. nunc et diam quis sapien dignissim auctor.
          quisque quis neque arcu, nec gravida magna.</figcaption>
      </figure>
    </div>
    
    
    //CSS
    
    /* unopened lightbox */
    .lightbox {
      display: none;
    }
    
    /* opened lightbox */
    .lightbox:target {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* lightbox content */
    .lightbox figcaption {
      width: 25rem;
      position: relative;
      padding: 1.5em;
      background-color: lightpink;
    }
    
    /* close button */
    .lightbox .close {
      position: relative;
      display: block;
    }
    
    .lightbox .close::after {
      right: -1rem;
      top: -1rem;
      width: 2rem;
      height: 2rem;
      position: absolute;
      display: flex;
      z-index: 1;
      align-items: center;
      justify-content: center;
      background-color: black;
      border-radius: 50%;
      color: white;
      content: "×";
      cursor: pointer;
    }
    
    /* lightbox overlay */
    .lightbox .close::before {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: rgba(0,0,0,.7);
      content: "";
      cursor: default;
    }
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    :target{
    	background-color:pink;
    }
    </style>
    </head>
    <body>
    	<a href="#html">点击</p>
    	<pid="html">htmlCSS中文手册</p>
    </body>
    </html>
    点击

    CSS中文手册