我如何檢查和調整：之前和之後：在瀏覽器中的僞元素？

我已經使用僞元素創建了一些相當複雜的DOM元素，並且希望能夠在Chrome Inspector或Firebug或同等版本中檢查並調整它們。我如何檢查和調整：之前和之後：在瀏覽器中的僞元素？

儘管在this WebKit/Safari blog post（2010年）中提到了此功能，但在Chrome或Safari中都找不到此功能。 Chrome至少有複選框可以檢查：hover，：visited和：active states，但是：before和after之後無處可見。

此外，this blog post（日期爲2009年！）提到這種功能存在於IE開發工具中，但我目前正在使用Mac OS，所以這對我沒有任何幫助。另外，IE不是我主要針對的瀏覽器。

有沒有檢查這些僞元素的方法？

編輯：除了錯誤的關於Firebug無法檢查這些元素，我發現Opera在檢查：在開箱即用之前和之後都很擅長。

來源

2012-04-16 majackson

與螢火蟲，你可以檢查這些pseudoelements的*風格*。 – fcalderan 2012-04-16 13:14:47

@ F.Calderan怎麼樣？如果我修改它，它會更新頁面嗎？ – majackson 2012-04-16 13:22:39

是的，我可以通過Fx11/MacOS上的螢火蟲1.9.1更改pseudoelements的屬性 – fcalderan 2012-04-16 13:26:13

在Chrome's Dev tools，樣式僞元素在面板中可見：

否則，你也可以輸入在JavaScript控制檯下面一行，並檢查返回CSSStyleDeclaration對象：

getComputedStyle(document.querySelector('html > body'), ':before');

來源

2012-04-16 13:26:07

我沒看到這個。你在檢查什麼元素才能看到它出現在面板中？另外，你使用的是什麼版本的Chrome？ – majackson 2012-04-16 13:28:07

@majackson Chrome 18.0 Ubuntu 11.10。在本演示中檢查'x'：http://jsfiddle.net/2M6JA/ – 2012-04-16 13:28:59

我在演示中看到了僞類，但沒有看到我的代碼，這讓我懷疑我遇到了另一個不同的問題。無論如何，很明顯你是對的，所以我會把它標記爲已解決 - 非常感謝！ – majackson 2012-04-16 13:34:46

自Chrome 31僞元素的顯示元素面板作爲它們的父的子元素圖如下圖所示：

Screenshot

您可以選擇它們，你會正常元素，但如果刪除content樣式，則僞元素也將被刪除，devtools焦點將更改爲其父項。

看起來，繼承的CSS樣式是而不是可見，而且您無法從元素面板編輯CSS內容。

來源

2013-11-14 13:19:03

我只是偶然發現它，它是真正有用的（除了你在最後一段中指出的）。謝謝回答。 – bfncs 2013-11-15 10:06:10

@boundaryfunctions不客氣！希望Devtools團隊能夠看到並更新它。 – 2013-11-15 12:21:58

Firefox已經有了這個功能一段時間了，只需右鍵單擊「檢查元素」，然後在檢查器的右側面板中查看前後元素。

來源

2014-02-12 06:49:52 NoBugs

我沒有在「native」檢查器工具中看到'：after'和'：before'僞元素 - 切換僞元素只給出了'懸停'，'主動'和'焦點'。雖然我可以在Firebug中看到它們。 – sameers 2015-10-15 23:16:40

@sameers你是否在談論右鍵菜單上的切換？因爲：之前和之後不是你在那裏切換的東西，它們應該總是顯示在CSS檢查器中。 – NoBugs 2015-10-16 12:37:55

Chrome不會在DOM樹中的僞元素之前和之後顯示，如果他們錯過「content」屬性。它應該被設置，即使它被設置爲無。

這將不會顯示：

:after { 
    background-color: red; 
}

這將在檢查顯示：

:after { 
    content: ""; 
    background-color: red;  
}

希望它能幫助。

來源

2014-02-17 13:17:04 pop

這非常有幫助！我找不到一些我的後續元素，現在我知道它的原因。 – Arashsoft 2016-10-07 19:55:59

謝謝你，+1 – 2018-02-15 15:07:30

很多的挫折之後，我想通了，Firefox不會在所有顯示在文檔樹僞元素，但如果你選擇具有定義，那麼僞元素（S）的確切元素其僞元素的樣式顯示在右側的樣式規則部分。對於螢火蟲和內置檢查（「Q」）都是如此，我很震驚沒有人打算在此之前清楚地解釋這一點。顯然，鉻/鉻對僞元素的處理非常優越，因爲它們可以選擇（既可以在文檔樹中，也可以直接在頁面上），並像普通元素一樣進行檢查，包括佈局，屬性和其他所有元素，獨立他們的「所有者」。

我目前使用的瀏覽器版本：Chromium 40.0.2214.91，Firefox 31.3.0。

來源

2015-02-25 08:16:27 aditsu

我如何檢查和調整：之前和之後：在瀏覽器中的僞元素？

回答

相關問題