在整个站点中查找 CSS id/class 的每个实例答案

【问题标题】：Find every instance of a CSS id/class across a whole site在整个站点中查找 CSS id/class 的每个实例
【发布时间】：2012-03-17 23:24:33
【问题描述】：

在进行可能产生意外后果的 CSS 更改之前，有什么好的方法可以在整个网站（不仅仅是这个页面）上找到使用了 id 或 class 的其他位置？（不必详尽无遗，半手工流程也可以。）

就上下文而言，这是一个基于 Joomla 的网站，内容很多，但我对其中的大部分内容还不熟悉。有问题的 id 有一个两个字母的名称，我不知道它还能用在哪里。对于任何类似 grep 的方法，我都没有直接访问服务器的权限。

我能想到的唯一技术是使用 Stylish 对那个选择器做出明显的改变，然后浏览一下网站看看它在哪里弹出。

【问题讨论】：

您可以在 Dreamweaver 中使用“搜索整个本地站点”，但如果您的班级只有 2 个字母，则可能会返回很多错误结果
您是否只对直接链接的页面感兴趣，不包括您可能拥有的任何独立页面？答案将影响对您网站的爬取是否合适。如果你真的需要 all 页面，无论它们是否被链接，这都会很棘手，因为你不能只在模板、内容、代码中使用 grep - 你需要全部 3 个。如果是这种情况，您可能希望将问题空间减少为“过去 n 天内访问过的页面”之类的内容，并从访问日志中获取这些 URL。

标签： css joomla

【解决方案1】：

我使用unused-css.com 处理这类事情。您只需输入您的网页，它就会浏览整个网站（包括登录）并为您提供您实际使用的 CSS。

我发现它有 95% 的正确性 - 但它只不会处理一些 CSS 浏览器黑客攻击和一些错误（即 CSS 仅在错误后显示），所以它应该可以正常工作这个。

您还可以检查原始模板（假设模板是商业模板）以查看 id 可能应该在哪里（他们通常将所有内容都放在演示模板中），但未使用-css不会告诉你它在哪里使用，只有它是不是。为此，我将从查看源代码开始 -> 在主要页面上查找，然后尝试其他提到的解决方案。

【讨论】：

有趣的工具，值得了解。它并不能完全解决这个特殊问题，因为我知道使用了 CSS 样式，只是不知道它使用了多少。
我知道这篇文章很旧，但是谷歌在这个特定参数中输入了一些关键字来引用它，所以我想用这个答案添加我的经验。不幸的是，Dust Me Selectors 不会扫描 ASP.Net 母版页 (*.Master)（这是一个真正的遗憾）。

【解决方案2】：

这实际上并不像听起来那么难。首先查看模板的 index.php 文件。这个文件应该很小，没有大量代码，除非模板来自使用模板框架的开发人员。如果 ID 在那里，那么它将显示在网站的每个页面上，因为这是构建每个页面的基础。

如果你没有在其中找到它，那么你需要确定它是显示在模块位置还是在组件区域中。您应该能够通过查看模板中的 index.php 文件来区分它们。

如果它位于模块位置，则 ID 应仅显示在该特定模块的实例中。

如果它在组件区域，那么它应该只显示在组件创建的任何页面中。这确实留下了它影响许多你不想改变的元素的可能性。但是有一个解决方案。您可以使用菜单项中的页面类后缀向要更改的页面添加唯一的 id/类（取决于您的模板）。使用这个独特的后缀，您可以创建一个特定的选择器，该选择器只会影响您想要更改的页面。

【讨论】：

它是 Joomla，如原始问题中所述。此外，我无权访问任何模板，也如上所述...
因为 Joomla 是我这样回答的原因。您可以直接通过 Joomla 管理员访问模板文件，其他一切都通过查看前端的源代码来完成。您可能想阅读一些 Joomla 教程。一旦您了解了 Joomla 的工作原理，就很容易判断特定类或 ID 的来源以及它会产生什么影响。

【解决方案3】：

假设您不想使用 grep 方法：

有问题的 ID 是出现在页面的实际内容区域中，还是出现在“周围”区域中？如果它看起来不是内容的一部分，而是出现在模板中，您可以在模板文件中搜索它。当您更新 CSS 时，我假设您至少可以掌握模板文件。许多文本编辑器/IDE 将允许您进行“全局搜索”。我会在 TextMate（我选择的文本编辑器）中加载模板文件，并为特定 ID 执行“在项目中搜索”。

这至少会让您大致了解该 ID 出现在网站的哪个位置。不，它不会是每个“页面”，但您会知道它出现在什么类型页面上（对于 CMS，它确实是你所追求的）。

如果有问题的 ID 出现在内容中，也就是说，它是由内容创建者手动输入的，您将不得不走另一条路。您有权访问数据库吗？如果您可以获得数据库的转储（我认为 Joomla！是基于 MySQL 的），您可以在 Sequel Pro 之类的工具中打开 sql 并在内容记录中搜索该 ID。

【讨论】：

【解决方案4】：

将整个站点的源代码树放入 NetBeans 或 Eclipse 等 IDE 中，然后在根文件夹中递归搜索 id="theid"。

如果这不可行，您将如何更新 CSS？

【讨论】：

【解决方案5】：

最简单的方法是本地grep，但由于您无权访问服务器，请尝试使用wget在本地下载：

wget -r -l --domains=http://yourdomain.com http://yourdomain.com

这将递归地从您的域中检索页面，直到无限深度，但仅跟踪指向您域中页面的链接。一旦它在磁盘上，做一个本地的grep，你就很好了。

【讨论】：

根据链接在您网站上的工作方式，您可能还想使用--relative 仅关注相对链接。
嗯，可以。魔鬼的拥护者：它不会拾取加载后应用的样式。
那是鬼鬼祟祟的......也许这会有所帮助：stackoverflow.com/questions/5901661/wget-javascript
看起来正确的参数可能类似于 "wget --recursive --level 3 --convert-links --limit-rate=10k --accept html example.com"
这行不通，因为您最多只能获得站点内各个页面的源代码。它无法解决问题并确定 CSS 是来自模板、模块、组件还是插件。