Chrome开发工具CSS选择器方法

时间:2017-09-07 09:39:47

标签: css google-chrome

我正在寻找一种方法或启发式方法,以便我在我自己没有构建的网站上对CSS进行小的更改。

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

我可以右键点击Chrome开发者工具中的元素,然后复制选择器路径以获得#sc_team_792900095_11 > div.sc_team_item_avatar > div > div > div.sc_team_item_position

之类的内容

我想知道这是"标准"定位特定元素或元素集的方法?有没有潜在的缺点?

过去我花了几个小时从元素类中构建我的选择器我检查并添加父元素的类和id,直到我可以神奇地影响我想要的元素。有时候我会从样式窗格中复制这些类,但是发现这些类本身并不够。

我做错了吗?知道自己在做什么的人通常使用copy selector方法来修改特定元素的CSS吗?如果没有,你能描述你使用的过程,以及它所基于的原理吗?

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

这是一种针对您的真实代码中使用的元素的可怕方法。

Chrome正在选择元素,使其在字面上“独特”。您通常会使用它来快速定位元素以在控制台中使用(如果您不知道chrome的$ 0功能)。该选择器的目标是一个类元素,但不是该类的所有元素。

要设置您真正需要使用的那类元素的样式:

.sc_team_item_position {
    styles here.
 }
相关问题