不要样式化伪class:before/:after

是否有任何方法可以只对基本元素进行样式设置，而不是他的:before或:after伪类?

<div id="main">bar</div>
#main:before {
  content:'foo'
}
#main {
  background:red;
}

我只想把"bar"涂成红色，而不是"foo"部分。当然，我可以在另一个css选择器#main:before{background:white}中否定它，但我希望在一个语句中完成它。我试过这样写:

#main:not(:before) {
  background:red;
}

编辑:我不仅需要使用背景色，还需要使用字体大小等

不需要:not(:before)之类的东西。#main选择器已经做到了这一点。要查看这一点，可以设置一个不可继承的属性，如border:

#main { border: 1px solid; }

这将在main周围画一个边框。它不会在生成的内容周围绘制另一个边框。所以选择器只针对#main。你生成的内容有一个透明的背景(默认)。

问题在于生成的内容存在于#main:

中的一个匿名框中。

+-------------+
| +-----+     |
| | foo | bar |
| +-----+     |
+-------------+

基本上，这与

的情况相同

<div id="main">
    <span class="before">foo</span>
    bar
</div>

您可以很容易地看到，它不可能添加背景文字栏，因为#main的背景将通过跨度发光。如果您使用#main:not(.before)作为选择器，这绝对不会改变任何东西。

你所能做的就是通过给.before添加一个白色背景来覆盖它。或者在栏周围插入span，如另一个答案所建议的。

其他属性，如font是受继承的，所以技术上问题的原因是不同的，但解决方案是相同的。

不，没有:before或:after伪元素，没有办法引用元素的内容，除非将该内容包装在内部元素中。这里没有任何选择器。但是请注意，元素上设置的任何内容只应用于整个元素;只有通过继承(对于可继承的属性)才会影响伪元素的呈现。背景属性是一种特殊的情况，因为它们不是继承的，但它们的工作方式几乎就像它们一样，因为初始值是background: transparent。

如果你检查DOM，你会看到::before伪元素是如何在#main中呈现的。这就是为什么你的#main:before继承了#main的背景。

除了在'bar'周围添加span之外，我看不到其他解决方法:

<div id="main"><span>bar</span></div>
#main:before {
  content:'foo';
}
#main>span {
  background:red;
}

我想你可以这样做，这取决于具体情况:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#main {
  background:red;
  position: relative;
  margin-left: 2em;
}
#main:before {
  content:'foo';
  position: absolute;
  margin-left: -2em;
}
</style>
</head>
<body>
<div id="main">bar</div>
</body>
</html>

相关内容

最新更新

热门标签：