Javascript 删除伪选择器之前由：：添加的元素

我有以下情况：（样式是在SASS中完成的，不必要的样式被省略。）

---

这将在应用程序菜单栏的顶部创建一个栏。在某些情况下，必须移除此杆。我读过这样的问题，但没有成功。删除由：：before选择器添加的此条的最佳方法是什么

通常的方法是创建一个应用于相关元素的更具体的规则（或具有相同特殊性的更高规则），并指定

display:none

以隐藏这种情况下的伪代码

例如：这里，我希望在

前面有一个X，但如果它们在

中，则不需要。header

：

span.foo:：before{
内容：“X”；
}
.header span.foo:：before{
显示：无；
}

这些有X：
span.foo 1
span.foo 2
span.foo 3
这些没有：
span.foo 4
span.foo 5
span.foo 6

如果您使用JavaScript操作DOM，则可以向具有

.header

的元素添加类名（例如

.remove bar

），以删除伪元素（生成的内容）：

。删除条{
&：：在{content:none；}之前
}

---

还要确保它放在前面的样式之后，或者在需要时使用更具体的选择器。

只有CSS可以删除伪元素，因此您需要另一个类显示：none前面的代码。首先在CSS中声明该类：

.header {
  ...
  &::before {
    ...
    position: absolute;
    height: 0.5rem;
    ...
  }

  &.no-before::before{
    display:none;
  }
}

然后，当您要删除它时：

$('.header').addClass('no-before'); //Remove before
$('.header').removeClass('no-before'); //Re-add before

---

或者是一个更高的规则，具有完全相同的特殊性。@Blazemonger:的确如此。你必须在自己的CSS样式表中尝试以相同的元素为目标，并用替换样式！重要吗？

$('.header').addClass('no-before'); //Remove before
$('.header').removeClass('no-before'); //Re-add before