Question

我有以下情况:(样式在SASS中完成，省略了不必要的样式。）

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

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

Answer 1

只有CSS可以删除伪元素，所以你需要有一个display: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

Answer 2

通常的方法是创建一个更具体的规则，该规则适用于相关元素（或具有相同特异性的以后的规则），并指定隐藏display: none那种情况下的伪。

例如：在这里，我希望在<span class="foo">前面有一个X，但如果它们在.header中则不是：

span.foo::before {
  content: 'X ';
}
.header span.foo::before {
  display: none;
}

<div>
  These have the X:
  <span class="foo">span.foo 1</span>
  <span class="foo">span.foo 2</span>
  <span class="foo">span.foo 3</span>
</div>
<div class="header">
  These don't:
  <span class="foo">span.foo 4</span>
  <span class="foo">span.foo 5</span>
  <span class="foo">span.foo 6</span>
</div>

Answer 3

如果您使用JavaScript操作DOM，则可以将类名称（例如.remove-bar）添加到具有.header的元素中，以便删除伪元素（生成的内容）：

.remove-bar {
    &::before { content: none; }
}

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

删除:: before伪选择器之前添加的元素

3 个答案: