CSS :target 選擇器
定義和用法
帶有 # 及其後跟錨點名稱的 URL 會連結到文件中的某個元素。連結到的元素就是目標元素。
:target 選擇器可用於樣式化當前活動的目標元素。
| 版本 | CSS3 |
|---|
瀏覽器支援
表格中的數字表示首次完全支援該選擇器的瀏覽器版本。
| 選擇器 | |||||
|---|---|---|---|---|---|
| :target | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS 語法
:target {
css 宣告;
}
更多示例
示例
建立模態框（對話方塊）
/* 模態框的背景 */
.modal {
display: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* 目標元素時顯示模態框 */
.modal:target {
display: table;
position: absolute;
}
/* 模態框 */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* 模態框的內容 */
.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
自己動手試一試 »
