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）。

从作者的an introduction post复制：

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

Answer 2

对于不支持Element Finder插件的编辑器上的用户，您可以使用与element-finder npm module（由同一作者）的命令行界面相同的核心功能。

$.ajax({
    url: "https://data.raleighnc.gov/resource/xce4-kemu.json", // didn't you want to get another URL??!?
    type: "GET",
    dataType: "json",
    data: {
      "$limit" : 5000, // Does the API require the dollar signs? Looks weird.
      "$$app_token" : "YOURAPPTOKENHERE" // Did you actually replace with your API key?
    },
    success: (data) => {
        alert("Retrieved " + data.length + " records from the dataset!");
        console.log(data);
    },
    error: (xhr, textStatus, errorThrown) => {
        // error
    }
});

-s是CSS选择器
-i被忽略文件夹
-x是要搜索的文件扩展名

有没有办法让我知道哪些文件受到使用Sublime Text 2的CSS规则的影响？

2 个答案: