使用Bootstrap主题时，如何快速定位CSS外部样式表中的选择器？

• 浏览器开发者工具直接跳转
  右键目标元素选「检查」，在Elements面板的Styles区域，找到对应选择器的样式规则——规则右侧会显示该CSS所在的文件名和行号，点击这个链接就能直接跳转到Sources面板里的对应代码位置。如果是压缩后的CSS，点击Sources面板顶部的「格式化代码」按钮（{}），就能展开可读性强的代码，方便查看上下文。

• 编辑器全局搜索
  用VS Code、Sublime这类代码编辑器的全局搜索功能（Windows/Linux按Ctrl+Shift+F，Mac按Cmd+Shift+F），直接输入目标选择器的完整名称（比如.navbar-nav .nav-link），再筛选文件类型为.css，瞬间就能找到所有匹配的位置。如果选择器带特殊符号（比如.、#），直接输入就行，编辑器会精准匹配。

• 利用CSS源映射（针对预处理语言场景）
  如果你的Bootstrap主题是用Sass/Less这类预处理语言编译的，编译时一般会生成.map文件。打开开发者工具的Settings，确保「Enable CSS source maps」选项开启，之后在Elements面板点击样式规则的链接，就能直接跳转到对应的.scss/.less源文件的对应行，不用在压缩后的CSS里找来找去。

另外提个小技巧：如果记不清完整选择器，搜部分关键词也能缩小范围，比如找和按钮相关的样式，搜btn就能快速定位到相关选择器。

内容的提问来源于stack exchange，提问作者Patrick Fiatsonu