Aynı öğe için birden fazla: sözde öğeye sahip olabilir miyim?

:beforeAynı öğe için birden fazla takma ad olabilir mi?

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

Yukarıdaki stilleri jQuery kullanarak aynı öğeye uygulamaya çalışıyorum, ancak yalnızca en yeni olanı uygulandı, ikisi de asla.

CSS2.1'de, bir eleman herhangi bir zamanda herhangi bir sözde elemandan en fazla birine sahip olabilir. (Bu araçlar bir eleman a ikisine de sahip olabilir :beforeve bir :aftersahte eleman - sadece her bir türden birden fazla olamaz.)

Sonuç olarak, :beforeaynı öğeyle eşleşen birden fazla kuralınız olduğunda , bunların tümü :before, normal bir öğede olduğu gibi tek bir sözde öğeye basamaklanır ve uygulanır . Örneğinizde, sonuç şuna benzer:

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

Gördüğünüz gibi, yalnızca en contentyüksek önceliğe sahip bildirim (daha önce belirtildiği gibi, en son gelen) yürürlüğe girecektir - diğer CSS özelliklerinde olduğu gibi, bildirimlerin geri kalanı atılır.

Bu davranış BB2.1'in Seçiciler bölümünde açıklanmaktadır :

Sözde öğeler, aşağıda ve başka yerlerde açıklanan istisnalar dışında, CSS'deki gerçek öğeler gibi davranır .

Bu, sözde öğelere sahip seçicilerin normal öğeler için seçiciler gibi çalıştığı anlamına gelir. Aynı zamanda, kaskadın da aynı şekilde çalışması gerektiği anlamına gelir. Garip bir şekilde, CSS2.1 tek referans olarak görünmektedir; ne css3-selectors ne de css3-cascade bundan hiç bahsetmez ve gelecekteki bir spesifikasyonda açıklığa kavuşturulup açıklanmayacağı görülmeye devam etmektedir.

Bir öğe aynı sözde öğe ile birden fazla seçiciyle eşleşebiliyorsa ve hepsinin bir şekilde uygulanmasını istiyorsanız, tarayıcının bunlarda tam olarak ne yapması gerektiğini belirtebilmeniz için birleşik seçicilerle ek CSS kuralları oluşturmanız gerekecektir. vakalar. contentBurada özelliği içeren eksiksiz bir örnek veremem , çünkü örneğin sembolün mü yoksa metnin mi önce gelmesi gerektiği net değil. Ancak bu birleşik kural için ihtiyaç duyduğunuz seçici, ya .circle.now:beforeda .now.circle:before- hangisini seçerseniz seçin, kişisel tercihinizdir, çünkü her iki seçici de eşdeğerdir, yalnızca contentkendinizi tanımlamanız gereken özelliğin değeridir .

Hâlâ somut bir örneğe ihtiyacınız varsa, bu benzer soruya verdiğim cevaba bakın .

Eski css3 içerik belirtimi::before::after , CSS2.1 kademesiyle uyumlu bir gösterim kullanarak birden çok ve sözde öğenin eklenmesiyle ilgili bir bölüm içerir , ancak bu belgenin eski olduğunu unutmayın - 2003'ten beri güncellenmedi ve hiç kimse bu özelliği geçtiğimiz on yılda uyguladı. İyi haber şu ki, terk edilmiş belge aktif olarak css-content-3 ve css-pseudo-4 kisvesi altında yeniden yazılıyor . Kötü haber, çok sayıda sözde eleman özelliğinin her iki belirtimde de bulunmamasıdır, muhtemelen yine uygulayıcı ilgisinin olmamasından kaynaklanmaktadır.

Ana öğenizin bazı alt öğeleri veya metni varsa, onu kullanabilirsiniz.

Ana öğenizi göreceli (veya mutlak / sabit) konumlandırın ve ikisini de kullanın: önce ve: mutlak konumlandırıldıktan sonra (benim durumumda mutlak olması gerekiyordu, sizinkini bilmiyorum).

Şimdi bir tane daha sözde eleman istiyorsanız, mutlak bir ekleyin: önce ana elemanın çocuklarından birine (eğer sadece metne sahipseniz, onu bir aralık içine koyun, şimdi bir elemanınız var), ki bu göreceli / mutlak / sabit değildir .

Bu öğe, sahibi ana unsurunuzmuş gibi davranmaya başlayacak.

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 */
}

Bunu kullanarak çözdüm:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

Simge için "font awesome 5 free" yazı tipi ailesini kullanarak ve ardından, tekrar kullandığımız yazı tipini belirtmek zorundayız çünkü bunu yapmazsak, gezgin varsayılan yazı tipini (times new roman veya benzeri bu).