如何伪元素

Question

我有有一个div看起来像这样一个HTML页面之前CSS样式只适用于DIV，而不是：

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

我的DIV pseudoelement之前有和我想仅将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之前或之后，他们会要求您输入内容：“”;以显示适用于DOM的样式：之前或DOM：之后

这意味着如果您将内容设置为none，则不会显示该样式。 覆盖你的DIV的风格，你可以简单地做

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

但我会避免之前或属性的所有应用程序的您的div元素后的应用。 div元素经常用于很多情况，所以你会遇到你现在面临的每个div元素的问题。这意味着写css来覆盖css。在大多数情况下这不是一个好习惯。

此外，如果有前，它的位置与父DOM相关后您的DOM元素这样说，如果你的DOM的填充，保证金，定位，大小的变化会影响到之前或DOM后