如何僞元素

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後