如何快速了解任何html元素的正确css选择器或选择器组？

Question

如何快速了解任何html元素的正确选择器/选择器组？我正在研究非常臃肿的HTML代码。并且想要在某些特定区域应用css，但是要花费很多时间为表中任何深层嵌套的html标记找到合适的css选择器。

例如

#id1 #id2 .class1 .class2 table.no1 tbody td

有没有快速的方法或工具可以快速了解完美的css选择器？

我还需要在某些元素上覆盖一些css？

编辑：

之后从@BalucC获得答案

此外，我还发现这个工具适用于IE用户，它的工作方式与Web开发人员工具栏“

相同

MRI：测试您的选择器

MRI是Internet Explorer 6+以及基于Webkit和Mozilla的浏览器（包括Safari，Firefox，Camino或Mozilla）的书签。用它来测试和玩选择器。 http://www.westciv.com/mri/

See screenshot here

Answer 1

Web Developer Toolbar对我有很大的帮助。只需执行 Ctrl + Shift + F ，单击感兴趣的元素并检查工具栏底部的元素链或祖先上市。

这是一个屏幕（点击查看完整版）：

Answer 2

IMO，Firebug是适合您案例的最佳工具。只需“检查”页面，然后单击页面布局中的元素或代码本身。

Answer 3

没有自动化工具可以知道您的意图。例如，哪一个是正确的？

td { background: yellow; }
tbody td { background: yellow; }
table table td { background: yellow; }
tr.odd td { background: yellow; }

如果不知道你的意图，就不可能说出来。您可能希望不仅在此页面上考虑包含和/或包含元素，还考虑使用相同样式表的其他页面。基于确定是否创建它们的动态条件和标准，该页面上可能存在或不存在相关元素。

简短回答？否。

Answer 4

• Firebug for Firefox
• 适用于Webkit，Safari和Chrome的Web Inspector
• 用于Internet Explorer的IE Developer Toolbar
• XyleScope和CSSEdit for Mac

Answer 5

我用它来向我展示标签层次结构。

http://westciv.com/xray/

另外，你可以试试Firebug：

https://addons.mozilla.org/en-US/firefox/addon/1843

编辑由于提供的附加信息：

要覆盖CSS规则，请使用“！important”。例如，

<style type="text/css">
#id-to-overwrite {
width:25px !important;
}

</style>