：target的使用方法，只明白#box：target， div：target是什么意思？

以下代碼樣式中div：target+a不明白什么意思？“+”號(hào)我明白，不明白為啥div：target？target的前面不應(yīng)該是a標(biāo)簽的url地址嗎？

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            float: left;
            width: 120px;
            height:50px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
            background: #000;
            color: #fff;
            border:2px solid #fff;

        }
        div{
            position: absolute;
            top:80px;
            width: 300px;
            height:300px;
            background: yellow;
            display: none;
        }
        #box1:target{
            display: block;
        }
        #box2:target{
            display: block;
        }
        #box3:target{
            display: block;
        }
        div:target+a{
            background: red;
        }
    </style>
</head>
<body>

<div id="box1">第一個(gè)內(nèi)容第一個(gè)內(nèi)容</div>
<a href="#box1">第一個(gè)內(nèi)容</a>

<div id="box2">第二個(gè)內(nèi)容第二個(gè)內(nèi)容</div>
<a href="#box2">第二個(gè)內(nèi)容</a>

<div id="box3">第三個(gè)內(nèi)容第三個(gè)內(nèi)容</div>
<a href="#box3">第三個(gè)內(nèi)容</a>
<!--
    :target
        選取當(dāng)前地址欄后面的url進(jìn)行匹配
-->
</body>
</html>

回答

編輯回答

薄荷糖

target偽類你可以把它理解為“被訪問”，所以如果a標(biāo)簽里的錨點(diǎn)被命中，那么div:target+a這句規(guī)則的意思就是：
如果div被訪問,那么與它相鄰的a元素(+是相鄰關(guān)系選擇符)的樣式為blablablabla~

2018年5月5日 03:59

編輯回答

孤慣

偽類選擇器

target 選擇器會(huì)突出顯示當(dāng)前活動(dòng)的 HTML 錨。

定義和用法
URL 帶有后面跟有錨名稱 #，指向文檔內(nèi)某個(gè)具體的元素。這個(gè)被鏈接的元素就是目標(biāo)元素(target element)。

:target 選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素。

所有主流瀏覽器均支持 :target 選擇器，除了 IE8 及更早的版本。

<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>這是標(biāo)題</h1>

<p><a href="#news1">跳轉(zhuǎn)至內(nèi)容 1</a></p>
<p><a href="#news2">跳轉(zhuǎn)至內(nèi)容 2</a></p>

<p>請(qǐng)點(diǎn)擊上面的鏈接，:target 選擇器會(huì)突出顯示當(dāng)前活動(dòng)的 HTML 錨。</p>

<p id="news1"><b>內(nèi)容 1...</b></p>
<p id="news2"><b>內(nèi)容 2...</b></p>

<p><b>注釋：</b> Internet Explorer 8 以及更早的版本不支持 :target 選擇器。</p>

</body>
</html>

2017年12月15日 15:25