是否有任何工具可以显示受特定CSS规则影响的站点中的所有元素/页面？

Question

当然，我们可以使用像Firebug这样的工具来突出显示HTML的部分内容并查看所有CSS的应用。

但反过来呢？是否有某种工具可以突出显示特定的CSS规则并向您显示适用于该网站的所有页面（静态HTML页面或其动态模板）？

示例：我来到一个新网站，非常大，我需要在特定页面上编辑CSS，但这样做，我不知道网站上有多少其他网页也可能有这些类名因而受到影响当然，我可以尝试在整个网站上搜索类名，但这可能是耗时或棘手的。例如，该站点有一个名为“ba”的类。如果我只搜索“ba”，猜猜有多少不相关的页面会出现？那么如何包含双引号（“ba”？嗯，它可能在其他几个类（class =“hz ba top”）的中间，最后（class =“hz ba”）等。更多因此，它可以通过服务器端代码动态插入，使其更难找到。一个可以以某种方式占用您的网站并能够识别您的CSS更改将影响的所有位置的工具将会很棒。

Answer 1

不完全是这样，但是有一个firebug插件可以为任何加载的页面执行此操作：

http://robertnyman.com/firefinder/

Answer 2

你可以使用正则表达式..

例如，在搜索对话框的Dreamweaver中

：

1. 选择“查找：整个当前本地网站..”
2. 选择“搜索：源代码”
3. 选中'使用正则表达式'
4. 在find textarea中输入class\s*?=\s*?".*?content.*?"
5. 点击“查找全部”

相同的正则表达式可以与其他可以使用正则表达式搜索文件内部的软件一起使用。
例如：http://www.sowsoft.com/search.htm（不隶属于他们，只是在这里找到它。）

请注意，此处的所有建议都没有考虑通过脚本添加类的情况。

Answer 3

如果您使用的是Mac，那么比利时的Indy Mac Shop就是一款名为“CSSEdit”的优秀共享软件应用。单用户许可证为30欧元。我用它约。三年，我可以高度推荐它。它是一个成熟，稳定的应用程序（虽然不断更新/改进）;广泛用于Mac网页设计师，以及那些不需要我们能得到的所有帮助的人，CSSEdit当然似乎提供了这些帮助。

显示由给定选择器设置的html页面上的元素：

（i）打开样式表和标记页面（标记页面必须有样式表的链接）;

（ii）关闭X射线按钮（必须在按钮下方读取“未激活”）;

（iii）在样式编辑器中，单击任何选择器（我点击它以使我的光标位于左边距，例如，在'＃'前面等）;

（iv）现在点击标记页面上的“检查员”（“X射线”旁边）。

现在，看看你的标记页面 - 它会在你所在的步骤（iii）中点击的样式影响元素周围的蓝色轮廓。

Answer 4

对于这类事情，我只使用grep，或者 - 更好，ack。 如果你在搜索短模式时担心误报，你可以做一个双重过滤：你grep包含class=的所有行，你在另一个grep中输出它的输出只会将结果缩小到包含两者的行class=和您的搜索模式（也可以使用\bba\b等字边界使用正则表达式更精确地指定，以避免匹配bar或abba）

Answer 5

如何在每个页面的主体上放置一个ID，并使用它来限制在CSS中明确说明的页面之外使用CSS？

像这样：

#mypage .description,
#myotherpage . description {
}

缺点：

• 必须在每个页面/模板上放置正文ID。
• 必须指定CSS应适用的每个页面。更多要管理的CSS代码。
• 使您的CSS不易于用眼睛扫描（因为该行以页面ID而不是CSS样式开头）。如果在几个页面上使用某些CSS样式（因为每种样式的css规范很长），这是一个更大的问题。

优点：

• 避免无意识的CSS更改传播。即更改一个页面会影响其他未知页面。
• 当您编辑CSS样式本身时，查看CSS更改会影响哪些页面。信息就在那里;无需搜索/ grep它。
• 强制开发者指定CSS会影响哪些页面。如果您只是将这些信息作为评论包含在CSS中，那么当在新页面上使用CSS时，某些人将不可避免地忘记更新评论。

我同意这位由朋友发表的声明：

“最大限度地减少使用多个地方的CSS。它不像编程;使用一些重复的CSS比使用无法管理的CSS更好。（像apple.com这样的页面有自己的样式表 每个页面，以及一些全局CSS。）“   - OlavBjørkøy，Blueprint CSS框架的原始创建者

我很喜欢你对此的看法，或者你是否有人找到了更好的方法。