CSS：好玩的‘伪类’系列之——(:target)

:target

定义：指一个唯一的页面元素(目标元素)，其id与当前URL片段匹配。一般结合锚点链接使用

触发条件：当当前页面存在被指定的目标元素时，可修改目标元素的样式

兼容：IE8及8以下不支持、Opera9.5以下不支持

举个栗子

html代码：

  

    
目录
    

     
跳到第一段!
     
跳到第二段!
     
因为目标不存在，所以这个链接毫无用处。
    

    
我的文章
    
点击上面第一个链接，可以跳转到我 这里
    
点击上面第二个链接，同样也可以跳转到我 这里。爽不爽？
  

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

效果图：

再看一个效果（用:target模拟一个全局弹窗的效果）：

效果图：

html代码：

  

    
实例1
    
实例2
  

  

    

      
      
我是一个全局的弹窗提示，之前被隐藏了，点击链接'实例1'，你就可以看到我了
    
  

  

    

      
      
我是也是一个全局的弹窗提示，之前被隐藏了，点击链接'实例2'，你就可以看到我了
    
  

css代码：

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