css :target偽類選擇器簡單介紹

螞蟻小編發表於2017-04-16
CSS

此偽類選擇器可能很多朋友都不是太瞭解，其實在某些時候是非常好用的。

下面就通過程式碼例項介紹一下它的作用，希望能夠給需要的朋友帶來一定的幫助。

關於錨點定位可以參閱html利用錨點實現定位一章節。

下面介紹一下此偽類選擇器的作用:

點選頁面中能夠跳轉到頁面其他元素的連結，那麼這個目標其他元素就是我們:target要匹配的元素。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">  
a{
  width:60px;
  height:20px;
  background:#F90;
  font-size:12px;
  text-align:center;
  line-height:20px;
  position:fixed;
  right:0px;
  top:50px;
  cursor:pointer;
  display:block;
  text-decoration:none;
}
#thediv{
  width:100%;
  height:50px;
  background:#CCC;
  margin-top:100px;
  text-align:center;
  line-height:50px;
}
#thediv:target{color:green;}
</style>  
</head>  
<body style="height:1000px;">  
<a href="#thediv">點選定位</a>
<div id="thediv">螞蟻部落</div>
</body>  
</html>

上面你的程式碼演示了:target偽類選擇的作用，可以匹配連結跳轉的目標。

:target選擇器更多內容可以參閱CSS E:target一章節。

相關文章