有什么方法可以讓我知道使用Sublime Text 2的CSS規則會影響哪些文件？

Question

如上所述，我希望能夠找到受CSS規則影響的項目中的所有文件。 例如，我鍵入“ #header .container li”，然后得到應用該規則的所有文件。

為了更清楚一點，假設我有一個包含以下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 li”（CSS規則），我希望得到文件1和文件3，因為它們受我鍵入的CSS規則影響。

Answer 1

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

從復制的后引入其作者：

元素查找器是Web開發人員用來查找哪些HTML文件包含與特定CSS選擇器匹配的元素的工具。 您可能是一個項目的新手，回到了一段時間沒有從事的項目，或者CSS選擇器尚不清楚，您不確定它會影響哪些頁面。 只需將CSS選擇器復制到Element Finder中，您將很快看到項目中與該選擇器匹配的所有HTML元素。 例如，如果您搜索div.main ，它將為您顯示所有類名稱為main的DIV元素。

Answer 2

對於不支持Element Finder插件的編輯器上的用戶，您可以使用與element-finder npm模塊的命令行界面相同的核心功能（由同一作者）。

npm install -g element-finder

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

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

有什么方法可以讓我知道使用Sublime Text 2的CSS規則會影響哪些文件？

問題描述

2 個解決方案

解決方案1
1 已采納 2012-12-29 09:19:09

解決方案2
0 2016-10-24 04:24:31

有什么方法可以讓我知道使用Sublime Text 2的CSS規則會影響哪些文件？

問題描述

2 個解決方案

解決方案1 1 已采納 2012-12-29 09:19:09

解決方案2 0 2016-10-24 04:24:31

解決方案1
1 已采納 2012-12-29 09:19:09

解決方案2
0 2016-10-24 04:24:31