Chrome Dev Tools CSS选择器方法 [英] Chrome Dev Tools CSS selectors Method

问题描述

我正在寻找一种方法或启发式方法，以便在自己尚未建立的网站上对CSS进行少量更改的情况.

I'm looking for a method or heuristic to follow in the situation where I am making small changes to CSS on sites which I haven't built myself.

通常，有多个样式表涉及在层次结构中不同点被覆盖的规则(WordPress站点有很多).我经常发现自己在努力进行所需的更改，有时还会发现自己有时使用！important 使其正常工作，这我并不理想.

Often there are multiple style sheets involved with rules overwritten at different points in the hierarchy (WordPress sites have this a lot). I often find myself struggling to make the changes I want, and also find myself sometimes using !important to make things work, which I know is not ideal.

我可以右键单击Chrome Dev Tools中的元素，然后复制选择器路径以获取类似#sc_team_792900095_11>的内容.div.sc_team_item_avatar>div>div>div.sc_team_item_position

I can right-click on an element in Chrome Dev Tools and copy the selector path to get something like #sc_team_792900095_11 > div.sc_team_item_avatar > div > div > div.sc_team_item_position

我想知道这是针对特定元素或元素集的标准"方法吗?有潜在的不利之处吗?

I'm wondering it this is the "standard" way to target specific elements or sets of elements? Are there any potential downsides?

过去，我花了数小时从正在检查的元素的类中构建选择器，并添加父元素的类和ID，直到可以神奇地影响所需的元素.有时我从样式窗格中复制这些类，但仅靠这些类是不够的.

I have spent hours in the past building up my selectors from the classes on the element I'm inspecting and adding the classes and ids of parent elements until I can magically affect the element/s I want. Sometimes I copy the classes from the styles pane, but find that on their own, those classes aren't enough.

我做错了吗?知道自己在做什么的人是否通常使用 copy选择器方法来修改特定元素的CSS?如果不能，您能否描述您所使用的过程以及它所基于的原理?

Have I been doing it wrong? Do people who know what they are doing generally use the copy selector method to modify the CSS of specific elements? If not can you describe the process you use, along with the principles it is based on?

推荐答案

这是在实际代码中定位元素的一种糟糕方法.

That is a terrible way of targeting elements for use in your real code.

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

Chrome is taking selecting the element so that it is 'unique' very literally. You would typically use that to quickly target an element for use in the console (if you weren't aware of chrome's $0 feature). That selector is targeting a class element but not all elements of that class.

仅需使用以下样式即可设置此类元素的样式:

To style that class of elements you would only really need to use:

.sc_team_item_position {
    styles here.
 }

这篇关于Chrome Dev Tools CSS选择器方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！