當(dāng)頁(yè)面中某個(gè)元素設(shè)置了一個(gè) ID 如 #target-test，那么當(dāng)訪問頁(yè)面 http://some.url.com#target-test 的話，給 :target 設(shè)置的樣式就會(huì)生效，比如為元素添加背景色或者設(shè)置邊框?，F(xiàn)在為大家介紹一些關(guān)于 :target 偽類的非常有用的黑科技，它不需要 JavaScript 就可以創(chuàng)建一些交互效果。
例1：隱藏或顯示元素
:target 偽類一個(gè)簡(jiǎn)單的用法就是顯示和隱藏目標(biāo)內(nèi)容。例如，在一篇博客中，我們可能希望在用戶點(diǎn)擊之前不顯示評(píng)論。要實(shí)現(xiàn)這個(gè)目標(biāo)我們通過 :target 可以方便的實(shí)現(xiàn)。
HTML：
<a href="#comments">Show Comments</a>
<section id="comments">
<h3>Comments</h3>
<!-- Comments here... -->
<a href="#">Hide Comments</a>
</section>
CSS：
#comments:not(:target) {
display: none;
}
#comments:target {
display: block;
}
例2：側(cè)邊欄抽屜式導(dǎo)航
另一個(gè)用例是側(cè)邊欄的抽屜式導(dǎo)航。我們把抽屜式導(dǎo)航相對(duì)于頁(yè)面固定下來(lái)，以確保用戶點(diǎn)擊時(shí)不會(huì)跳動(dòng)。
#nav {
position: fixed;
top: 0;
height: 100%;
width: 80%;
max-width: 400px;
}
#nav:not(:target) {
right: -100%;
transition: right 1.5s;
}
#nav:target {
right: 0;
transition: right 1s;
}
例3：彈出式模態(tài)框
更進(jìn)一步，我們可以創(chuàng)建一個(gè)覆蓋整個(gè)頁(yè)面的模態(tài)框。
#modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
width: 70%;
background: #fff;
padding: 20px;
text-align: center;
}
#modal-container:not(:target) {
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s;
}
#modal-container:target {
opacity: 1;
visibility: visible;
transition: opacity 1s, visibility 1s;
}
例4：改變?nèi)謽邮?/h2>
最后一個(gè)用例，雖然不太合適，但卻可以實(shí)現(xiàn)：把 <body> 作為 :target ，更改樣式或頁(yè)面布局。
#body:not(:target) {
main { width: 60%; }
aside { width: 30%; }
.show-sidebar-link { display: none; }
}
#body:target {
main { width: 100%; }
aside { display: none; }
.hide-sidebar-link { display: none; }
}
via：bitsofco.de，本文由 Specs 翻譯整理，發(fā)布在 WEB資源網(wǎng)。
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。