css - Chrome 开发者工具 CSS 选择器方法

Question

我正在寻找一种方法或启发式方法，以应对我在自己未构建的网站上对 CSS 进行小幅更改的情况。

通常有多个样式表涉及在层次结构中不同点覆盖的规则(WordPress 站点有很多)。我经常发现自己很难做出我想要的改变，而且有时我也发现自己使用 !important 来让事情正常进行，我知道这并不理想。

我可以右键单击 Chrome 开发工具中的一个元素并复制选择器路径以获取类似 #sc_team_792900095_11 > div.sc_team_item_avatar > div > div > div.sc_team_item_position

的内容

我想知道这是针对特定元素或元素集的“标准”方式吗？有什么潜在的缺点吗？

过去我花了几个小时从正在检查的元素上的类构建我的选择器，并添加父元素的类和 ID，直到我可以神奇地影响我想要的元素。有时我从样式面板复制类，但发现仅凭这些类是不够的。

我做错了吗？懂行的人是不是一般都是用copy selector的方式来修改特定元素的CSS？如果没有，您能否描述一下您使用的过程及其所基于的原则？

Answer 1

浏览器开发人员工具的复制选择器功能旨在为您提供一个选择器，保证唯一标识给定页面中的元素(仅当前状态，即它可能不是页面加载之间相同)。在您的情况下，给定的选择器只是一个选择器，它仅匹配其曾曾曾祖 parent 元素具有给定 ID 的元素。这在需要针对非常具体的元素并与之交互的非 CSS 用例中通常很有用。

如果您对定位该元素不感兴趣，但您想要定位该元素和其他类似元素，您可以通过删除不必要的部分等自由修改选择器以满足您的需要。例如，如果您只关心所有 .sc_team_item_position 元素的样式，您可以只用那个单独的类选择器编写一个 CSS 规则。您不需要整个复杂的选择器。

另请参阅:How does Chrome dev tools generate CSS selectors?