有什么方法可以让我知道使用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