查找網頁中可用CSS樣式的工具

假設我在現有網站中嵌入了一些HTML代碼。我想知道哪些CSS類已經可用。目前我能做到這一點，如下所示：查找網頁中可用CSS樣式的工具

查看源代碼的網頁
搜索包含.css文件
瀏覽這些內容，直到我找到一個有用的鏈接

這很乏味，而且並不詳盡。

什麼是更好的方法？

編輯你也可以做到這一點在Chrome：

檢查元素
選擇「資源」選項卡
導航到框架/../樣式
個別樣式

我想我正在尋找的是一個更高級別的可用CSS樣式的解釋視圖：不僅僅是內容s的CSS文件。所以如果一個風格在多個地方被完全定義，我只想看兩次。如果兩種不同的風格適用於相同的元素，我想看到兩個並排。

讓我們假設我不能通過嵌入代碼來做到這一點。

來源

2012-05-29 Steve Bennett ㄹ

點擊Chrome中的「檢查元素」 - 它會告訴你現有的HTML元素正在使用哪些CSS類 –

是的，我知道。我想知道其他* CSS類是否可用 - 不僅僅是當前頁面上的類。 –

在Chrome中按F12並選擇放大鏡。在IE中它也是F12，然後選擇一個小箭頭。 Firefox具有類似的功能，或者您可以下載Firebug，這對於Web開發人員非常有用。

來源

2012-05-29 23:45:12 Shenaniganz

複製此代碼，頁面主體的結束標記之前：我的代碼從這裏：http://snipplr.com/view/6488/ 測試在Chrome

//CODE  
<div id="allclasses" style="text-align:left"> 
</div> 
<script type="text/javascript"> 
var allTags = document.body.getElementsByTagName('*'); 
var classNames = {}; 
for (var tg = 0; tg< allTags.length; tg++) { 
    var tag = allTags[tg]; 
    if (tag.className) { 
    var classes = tag.className.split(" "); 
    for (var cn = 0; cn < classes.length; cn++){ 
    var cName = classes[cn]; 
    if (! classNames[cName]) 
     { 
     classNames[cName] = true; 
    } 
    } 
    } 
} 
var classList = []; 
for (var name in classNames) 
    classList.push(name+'<br />'); 
document.getElementById('allclasses').innerHTML = classList.sort(); 
</script>

來源

2012-05-30 00:00:52 codingbiz

這也列出了所有正在使用的CSS樣式，並非所有可用的CSS樣式。 –

我認爲Firefox的Web開發插件可能會幫助你。您可以從 here添加它。

來源

2012-05-30 08:25:17 nik

W3 CSS驗證器工具http://jigsaw.w3.org/css-validator/將顯示您指定的網頁可用的所有可用CSS樣式，位於錯誤樣式列表下方。

來源

2017-03-10 22:15:57

查找網頁中可用CSS樣式的工具

回答

相關問題