Question

有没有办法只设置基本元素而不是他的：在伪类之前或之后？

<div id="main">bar</div>

#main:before {
  content:'foo'
}
#main {
  background:red;
}

我只想要＆＃34; bar＆＃34;用红色绘制，而不是＆＃34; foo＆＃34;部分。当然我可以在另一个css选择器#main:before{background:white}中否定它，但我想在一个声明中完成它。我试过像：

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

编辑：我不仅要将它用于背景颜色，还要用于字体大小等

Answer 1

不需要:not(:before)之类的东西。 #main选择器已经这样做了。要查看此内容，请设置不可继承的属性，例如border：

#main { border: 1px solid; }

这将在主要区域周围绘制边框。它不会在生成的内容周围绘制另一个边框。因此选择器仅定位#main。您生成的内容具有透明背景（默认）。

问题在于生成的内容位于#main内的匿名框内：

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

基本上，这与

的情况相同

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

您可以很容易地看到，无法仅在单词 bar 中添加背景，因为#main的背景将在整个范围内闪现。如果您使用#main:not(.before)作为选择器，这将完全没有改变。

您所能做的就是通过向.before添加白色背景来覆盖此内容。或者在栏周围插入span，如另一个答案所示。

font等其他属性需要继承，因此从技术上讲，问题的原因是不同的，但解决方案是相同的。

Answer 2

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

的背景之前的原因

除了在＆＃39;栏周围增加一个范围之外，我没有看到解决方法：

<div id="main"><span>bar</span></div>

#main:before {
  content:'foo';
}
#main>span {
  background:red;
}

Answer 3

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

Answer 4

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

<!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>

不要伪造伪类：在/之后

4 个答案: