1

如上所述，我希望能够找到项目中受 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 规则的影响。

4

2 回答 2

1

使用插件/包元素查找器（需要 nodejs）。

抄自其作者的介绍帖：

Element Finder 是一个供 Web 开发人员查找哪些 HTML 文件包含与特定 CSS 选择器匹配的元素的工具。你可能是一个项目的新手，回到一个你有一段时间没有工作过的项目，或者 CSS 选择器不清楚，你不确定它会影响哪些页面。只需将 CSS 选择器复制到元素查找器中，您将很快看到项目中与该选择器匹配的所有 HTML 元素。例如，如果您搜索 div.main，它将显示所有具有类名的 DIV 元素 main。

于 2012-12-29T09:19:09.657 回答
0

对于不支持 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 是要搜索的文件扩展名
于 2016-10-24T04:24:31.650 回答