如何仅将CSS样式应用于div而不是之前的伪元素

Question

我有一个html页面有一个div看起来像这样:

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

我在div上有一个前伪元素,我试图只将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>