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

Question

我的測試顯示: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（太奇怪）它的工作如預期。

Answer 1

當片段（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屬性，它等於網址片段（這將使一個有效的片段標識符，而加載/導航文檔）。