從僞類覆蓋CSS

Question

我不是設計師，所以這個問題可能聽起來很愚蠢。

我可以覆蓋僞類但不填充color屬性。

下面是一個例子

HTML：

<p id="pid" class="pclass"></p> 

CSS：

.pclass 
{ 
    color:red; 
    padding-left: 20px; 
} 

#pid:before 
{ 
    content:'test '; 
    color:green !important; 
    padding-left: 0px !important; 
} 

Fiddle

Answer 1

原因

你從僞類應用的樣式僅應用於content。不是實際的元素。您可能認爲!important正在改變顏色，但事實並非如此。

因此，當您從僞類更改color時，內容的顏色即test發生更改。 padding-left僅應用於test而不是<p>元素。

Demo

檢查段落，並注意填充。

.pclass { 
 
    color: red; 
 
    padding-left: 20px; 
 
} 
 
.pclass:before { 
 
    content: 'test'; 
 
    color: green; 
 
    padding-left: 10px; 
 
}

<p id="pid" class="pclass"></p>

解決方案

爲了解決這個問題，你可以將元素的position設置爲relative和使用負left。

Demo

.pclass { 
 
    color: red; 
 
    padding-left: 20px; 
 
} 
 
.pclass:before { 
 
    content: 'test'; 
 
    color: green; 
 
    left: -20px; 
 
    position: relative; 
 
}

<p id="pid" class="pclass"></p>

Answer 2

使用這可能會幫助你

#pid::before { 
    left: -20px; 
    position: relative; 
} 

Answer 3

您可以使用#pid選擇簡單地覆蓋填充：標識具有的優先級高於類：

.pclass { 
    color:red; 
    padding-left: 20px; 
} 
#pid:before { 
    content: 'test'; 
    color: green; 
} 
#pid { 
    padding-left: 0; 
} 

如果您想保留通過:before添加的文字後邊距可以添加

padding-right: 20px; 

到#pid:before。