關於僞類:target

時間 2019-11-10

標籤關於 target 简体版

原文原文鏈接

什麼是target僞類？先看一下解釋：css

　　URL後面跟錨點#，指向文檔內某個具體的元素。這個被連接的元素就是目標元素(target element)，:target選擇器用於選取當前活動的目標元素。html

舉個例子：優化

<html>
    <a href="#target">點我</a>
    <div id="target"><div>
</html>

正常狀況下，a標籤裏會跟一個url，可是在這裏咱們添加的不是url，而是一個錨點，當咱們點擊a時，本頁面的url後面會添加上"#target"，而且，id爲target的div塊就處於了當前活動狀態url

那麼，這究竟有什麼用呢？spa

其實這用處可多了，能夠利用這種特性，不使用js就能實現一些交互效果code

仍是上面的代碼，爲其添加csshtm

#target:not(:target) {
    display : none;  
}

#target:target {
    display : block;
    width : 100px;
    height : 100px;
    border : 1px solid red;      
}

若是咱們不點擊a元素，div元素就不顯示，若是咱們點擊了a元素，div就顯示成一個100*100，而且擁有紅色邊框的塊；blog

若是瞭解了這種簡單的用法，咱們就能夠用它實現一些稍微複雜一點的東西，好比能夠實現一個自由切換的tab欄，或者一個能夠進入和退出的導航欄element

合理利用target僞類能夠減小js的使用，不只能夠實現頁面的優化，也能夠讓代碼結構更加清晰文檔

1. CSS3僞類:target
2. html5 target僞類
3. css3之:target僞類
4. CSS3 target僞類和not僞類.html
5. CSS3 target僞類簡介
6. css3 target僞類學習
7. :target的僞類的用法
8. CSS3-target僞類選擇器
9. :target 僞類使用技巧
10. CSS3---結構性僞類選擇器—target
更多相關文章...
• ASP.NET AdRotator Target 屬性 - ASP.NET 教程
• ASP.NET HyperLink Target 屬性 - ASP.NET 教程
• NewSQL-TiDB相關
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。