我可以有多個：在相同元素的僞元素之前？

Question

是否有可能有多個:before假同一個元素？

.circle:before { 
    content: "\25CF"; 
    font-size: 19px; 
} 
.now:before{ 
    content: "Now"; 
    font-size: 19px; 
    color: black; 
} 

我想上面的樣式應用到使用jQuery相同的元素，但只有最近的一個應用，從來沒有他們兩個。

Answer 1

在CSS2.1中，元素在任何時候最多隻能有一種僞元素。 （這意味着一個元素可以同時擁有一個:before和:after僞元素 - 它只是不能有各種不止一個）

其結果是，當你有多個:before規則匹配相同的元素，他們將所有級聯並適用於單個:before僞元素，與正常元素一樣。在你的榜樣，最終的結果是這樣的：

.circle.now:before { 
    content: "Now"; 
    font-size: 19px; 
    color: black; 
} 

正如你所看到的，只有具有最高優先級的content聲明（如提到的，是最後一個）將生效 - 該聲明的其餘部分被丟棄，就像任何其他CSS屬性一樣。

這種行爲在Selectors section of CSS2.1描述：

與下述不同僞元素的表現就像在CSS現實元素和elsewhere.

這意味着，與僞元素選擇工作就像正常元素的選擇器一樣。這也意味着級聯應該以相同的方式工作。奇怪的是，CSS2.1似乎是唯一的參考; css3-selectors和css3-cascade都沒有提到這一點，它是否會在未來的規範中得到澄清還有待觀察。

如果一個元素可以使用相同的僞元素匹配多個選擇器，並且希望以某種方式應用所有這些選擇器，則需要使用組合選擇器創建額外的CSS規則，以便您可以精確指定瀏覽器應該在這些情況下做。我無法提供一個完整的示例，其中包括content屬性，因爲不清楚符號或文本是否應該優先。但是，您需要用於此組合規則的選擇器是.circle.now:before或.now.circle:before--無論選擇哪個選擇器都是個人偏好，因爲兩個選擇器都是等效的，它只是您需要自定義的content屬性的值。

如果您仍然需要一個具體的例子，請參閱我對this similar question的回答。

The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements使用與CSS2.1級聯兼容的符號，但請注意，該特定文檔已過時 - 自2003年以來尚未更新，並且過去十年中沒有人實現過該功能。好消息是，廢棄文檔正在積極進行重寫，編號爲css-content-3和css-pseudo-4。壞消息是，在任一規範中都沒有找到多個僞元素特徵，這可能是由於缺乏實施者的興趣所致。

Answer 2

如果你的主要元素有一些子元素或文本，你可以使用它。

定位你的主要元素相對（或絕對/固定），並使用兩個：之前和：之後定位絕對（在我的情況它必須是絕對的，不知道你的）。

現在，如果您想要一個僞元素，請將一個絕對：before附加到其中一個主元素的子元素（如果您只有文本，將其放在一個跨度中，現在您有一個元素），這不是相對的/絕對/固定。

此元素將開始行爲，就像他的主人是您的主要元素。

HTML

<div class="circle"> 
    <span>Some text</span> 
</div> 

CSS

.circle { 
    position: relative; /* or absolute/fixed */ 
} 

.circle:before { 
    position: absolute; 
    content: ""; 
    /* more styles: width, height, etc */ 
} 

.circle:after { 
    position: absolute; 
    content: ""; 
    /* more styles: width, height, etc */ 
} 

.circle span { 
    /* not relative/absolute/fixed */ 
} 

.circle span:before { 
    position: absolute; 
    content: ""; 
    /* more styles: width, height, etc */ 
}