如何仅将CSS样式应用于div而不应用于before伪元素

Question

我有一个html页面，其div如下所示：

<div class="get-this"> blah blah </div>

我在div上有一个before伪元素，并且我试图仅将CSS样式应用于div，而这不适用于该伪元素。

.get-this:not(::before) {
  padding-top:2px;
}

该样式将应用于整个div。 是否可以将样式仅限制为div而不限制为伪元素？

Answer 1

这是级联的直接使用。

CSS级联的目的是使您能够将通用样式应用于更通用的选择器，并将覆盖样式应用于更特定的选择器。

因此：

.get-this {
  padding-top:2px;
}

.get-this::before {
  padding-top:0;
}

工作示例：

 .paragraph-one { color: red; } .paragraph-two { color: blue; } .paragraph-one::before { content: 'Paragraph One: '; } .paragraph-two::before { content: 'Paragraph Two: '; color: green; } 

 <p class="paragraph-one">This is paragraph one. It is red.</p> <p class="paragraph-two">This is paragraph two. It is blue.</p> <p>The <code>::before</code> pseudo-element preceding Paragraph Two <em>isn't the same color</em> as the rest of Paragraph Two, because, further down the cascade, an overriding style has been declared for the more specific <code>.paragraph-two::before</code> selector.</p> 

Answer 2

如果您已经将所有div元素都应用到css之前或之后，则它们将要求您键入content：“”; 为了显示应用于DOM：before或DOM：after的样式

这意味着，如果将内容设置为无，则不会显示该内容。 要覆盖您的div风格，您只需

.get-this:before {
    content: none;
}

但是我会避免将属性之前或之后应用到应用程序的所有div元素。 div元素经常在许多情况下使用，因此，每个div元素都将遇到问题。 这意味着编写CSS以覆盖CSS。 在大多数情况下，这并不是一个好习惯。

同样，如果您的DOM元素在其位置之前，之后与父DOM相关联，也就是说，如果您的DOM的填充，边距，位置，大小更改将影响到该DOM的之前或之后