你好 @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 选择器(这也可能非常有趣)。
希望这能帮到你。
另请参阅:




