有沒有一種方法可以使用Sublime Text 2知道哪些文件受到CSS規則的影響？

如上所述，我希望能夠找到項目中受css規則影響的所有文件。例如，我輸入「#header .container li」，並得到應用該規則的所有文件。有沒有一種方法可以使用Sublime Text 2知道哪些文件受到CSS規則的影響？

只是要更清晰，讓我們說我有這些HTML文件的項目：

File 1: 
--------------------- 
<html> 
<div id="header"> 
    <div class="container"> 
     <ul> 
     <li>Something</li> 
     <li>Something</li> 
     </ul> 
    </div> 
    </div> 
</html> 
--------------------- 

File 2: 
--------------------- 
<html> 
<div id="header2"> 
    <div class="container"> 
     <ul> 
     <li>Something</li> 
     <li>Something</li> 
     </ul> 
    </div> 
    </div> 
</html> 
--------------------- 

File 3: 
--------------------- 
<html> 
<div id="header"> 
    <div class="container"> 
     <ul> 
     <li class="nomatter">Something</li> 
     <li>Something</li> 
     </ul> 
    </div> 
    </div> 
</html> 
---------------------

如果我輸入「的#header .container禮」（CSS規則）我期望得到的文件1和文件3，因爲它們受我輸入的css規則的影響。

來源

2012-12-28 ErwinGO

您可以搜索一個項目Ctrl + Shift + F – kennypu

有絕對與html或css無關 –

@kennypu這不是我想要做的。 – ErwinGO

使用插件/包Element Finder（需要nodejs）。

從它的作者an introduction post複製：

元Finder是爲Web開發工具，以找到該HTML文件包含特定CSS選擇器匹配的元素。您可能是項目的新成員，但返回到您還沒有爲工作過的項目，或者CSS選擇器尚不清楚，並且您不確定究竟會影響哪個頁面。只需將CSS選擇器複製到元素查找器中，即可快速查看與該選擇器匹配的項目中的所有HTML元素。例如，如果您搜索 div.main，它會顯示所有DIV元素的類名稱爲 main。

來源

2012-12-29 09:19:09 aanton

謝謝！這是一個好方法。這似乎是我在尋找什麼。 – ErwinGO

有關不支持的元素查找插件編輯的用戶，可以使用相同的核心功能與element-finder npm module一個命令行界面（由同一作者）。

npm install -g element-finder 

elfinder -s ".layout-fluid #sidebar" -i ".tmp, dist" -x "html, php"

-s是CSS選擇器
-i被忽略的文件夾
-x是文件擴展名來搜索

來源

2016-10-24 04:24:31 iono

有沒有一種方法可以使用Sublime Text 2知道哪些文件受到CSS規則的影響？

回答

相關問題