CSS3 :target 選擇器做出onClick效果純CSS的lightbox

CSS3 :target 選擇器

定義和用法

URL 後面帶有錨名稱#(錨點)，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。

:target 選擇器可用於選取當前活動的目標元素。

:target CSS 代表一個唯一的元素（目標元件用）id匹配的URL的片段。

/ *選擇一個ID與當前URL片段匹配的元素* / 
：target  { 
  border ： 2px solid black ; 
}

例如，下面的URL有一個片段（用＃符號表示）指向一個名為section2：

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

: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;
}

/* Add a pseudo-element inside the target element */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}

/* Style italic elements within the target element */
p:target i {
  color: red;
}

See the Pen The :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents. by Leon Cheng (@jq153387) on CodePen.

利用純CSS3:target選擇器做出lightbox

您可以使用:target不使用任何JavaScript的來創建lightbox。這種技術依賴於錨點鏈接指向最初隱藏在頁面上的元素的能力。一但針對該錨點，CSS就會改變display以顯示它們。

Note: GitHub(demo)提供了一個更多更完整的:target的純CSS的lightbox方法

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;
}

See the Pen Pure-CSS lightbox by Leon Cheng (@jq153387) on CodePen.

資料翻譯參考來源：http://devdocs.io/css/:target