：動態生成的元素上的目標選擇器不會影響

我的測試顯示:target選擇器僅影響頁面加載時存在於DOM中的元素。我對嗎？：動態生成的元素上的目標選擇器不會影響

我不能在這裏創建一個片段，因爲我不能把iframe的與哈希（#）段，這樣你可以看到這裏的問題：

http://output.jsbin.com/vixave#new_element

HTML按鈕

<button onclick="addElement()">Add element</button>

CSS

div:target { 
    background:red; 
    color:#fff; 
}

的Javascript

function addElement() { 
    document.body.innerHTML += '<div id="new_element">New element</div><br /><a href="#new_element">highlight</a>'; 
}

在本演示中，你可以看到你點擊按鈕，DIV #new_element加入到體內後，他並沒有「得到」的風格。只有當你點擊鏈接，再次調用到相同的URL，風格纔會適用。

更新

而且@ BoltClock♦的評論，這種情況發生在Chrome和Firefox，但在IE（太奇怪）它的工作如預期。

來源

2016-05-15 Mosh Feu

這是預期的行爲。它不是像'：hover'這樣的直接僞類。這有點像增強的「target」屬性，這在錨中很常見。 – zer00ne

@ zer00ne謝謝。你有參考（官方文件也許？）謝謝.. –

https://designshack.net/articles/css/targetcss/是啓發性的，它不是官方的，雖然只是一篇文章，它比MDN更好地解釋它。我也在最近的帖子中使用過'：target' http://stackoverflow.com/a/37223453/2813224 – zer00ne

當片段（URL中的#後面的字符串）存在時，應用:target選擇器的樣式是正確的行爲。

指定的行爲可以在W3C Selectors和HTML5規範中找到。

6.6.2。目標僞類：目標

某些URI指的是資源中的某個位置。這種URI以「數字符號」（＃）結尾，後跟一個錨點標識符（稱爲片段標識符）。

具有片段標識符的URI鏈接到文檔中的某個元素（稱爲目標元素）。例如，這裏是一個URI指向錨定名爲section_2在HTML文檔中：

http://example.com/html/top.html#section_2

靶元件可通過表示：目標僞類。如果文檔的URI沒有片段標識符，則文檔沒有目標元素。

https://www.w3.org/TR/selectors/#target-pseudo

當文檔加載和有根據以下算法FFT沒有有效name或id屬性，文檔沒有有效的片段標識符。

5.6。9導航到片段標識符

...

如果在具有一個ID正好等於解碼fragid的DOM中的元素，則第一個這樣的元件按樹形順序是文件的指示部分;在這裏停止算法。

沒有解碼的fragid：如果DOM中有一個名稱屬性的值等於fragid（未解碼的fragid）的元素，那麼樹中第一個這樣的元素是文檔的指示部分;在這裏停止算法。

https://www.w3.org/TR/html5/browsers.html#scroll-to-fragid

然而，這似乎是不確定供應商應該如何處理插入節點與id或name屬性，它等於網址片段（這將使一個有效的片段標識符，而加載/導航文檔）。

來源

2016-05-16 07:55:06

那麼爲什麼IE工作？這真的很奇怪。另外，通常在CSS中，樣式隨時適用於任何內容。爲什麼這是僅在頁面加載時纔會發生的唯一主題？ –

「當文檔具有有效的片段標識符時，將應用目標選擇器[原文]」#new_element是根據URI語法的有效片段標識符，爲什麼它不能立即與目標元素匹配？另外，您引用的HTML規範中的文本看起來並不相關 - 這裏沒有導航發生。 – BoltClock

更改了措辭。我多次閱讀html5規範，無法找到規範操作DOM時文檔片段標識符會發生什麼情況。我在搜索DOM規格時也是如此。由於瀏覽器的行爲不同，而且沒有指定，所以你甚至不能告訴這個錯誤。 –

：動態生成的元素上的目標選擇器不會影響

回答

相關問題