如何识别和编辑/移除 Ember 元素?

你好 @b481

你所寻找的被称为“CSS 选择器”(简称“选择器”)。CSS 选择器用于“查找”(或者说选择)你想要设置样式的 DOM 元素。

例如,就在我现在输入的位置,我将尝试查找作曲器中你的用户名(b481)的选择器(仅作示例)。

我们的做法是将鼠标悬停在元素上(作曲器中的你的用户名 b481),然后右键单击,会弹出一个菜单,其中包含“检查”(Inspect)选项。

点击“检查”,开发者控制台就会打开(我现在使用的是 macOS 上的 Chrome 浏览器);如果运气好,我们想要的元素会被高亮显示。

如果你在控制台中高亮的元素上右键单击,你会看到一个“复制”→“复制选择器”的菜单项。

如果你选择该项并复制选择器,在这个例子中你会得到:

#ember433 > span > a

这实际上并不是一个很好的选择器,因为 #ember433 是由 Ember 分配的,但你可以将鼠标悬停在控制台的元素上,它会在目标页面和控制台中同时高亮显示相应的元素。好消息是,我们可以快速且轻松地找到大致范围。

接下来,你可以找到想要隐藏的元素。在这个例子中,你可以再次右键单击该元素,从鼠标下方的菜单中选择“添加属性”来测试我们的选择器。

我刚刚以这个截图为例进行了演示:

现在,具有 ID 为 ‘b481’ 的元素在该部分的 DOM 中被隐藏了。

因此,在这种情况下,我们知道如果使用以下 CSS:

span.action-title{
   display:none;
}

我们可以将其添加到我们的主题中,从而隐藏该元素。

在这种情况下,你应该检查页面上是否有多个元素具有相同的选择器,并且还要确保你选择的选择器不会过于宽泛,从而选中其他页面中你不希望隐藏的元素。

选择器越具体越好。

例如,在这种情况下,我们可以通过指定选择器是某个父元素的子元素来使其更具体(此例未经测试):

div.compose-action-title > span.action-title{
   display:none;
}

你可以看到我们正变得越来越具体;到这一步,你应该已经对如何查找想要修改的元素有了相当清晰的了解。

祝你探索愉快!

最后补充一点:

你可以使用 JavaScript 和 jQuery 来选择元素,但我发现,在像 Discourse/Ember 这样的单页应用(SPA)中,CSS 选择器效果很好,至少对我而言是这样。我通常只在需要以某种“棘手”的方式遍历 DOM 时才使用 JavaScript 选择器(这也可能非常有趣)。

希望这能帮到你。

另请参阅:

4 个赞