: sonra ve :: sonra


134

CSS 2.1 :afterile CSS 3 ::aftersözde seçiciler arasında herhangi bir işlevsel fark var mı ( ::aftereski tarayıcılarda desteklenmemesi dışında )? Yeni spesifikasyonu kullanmak için pratik bir neden var mı?

Yanıtlar:


133

Sözde sınıf ve sözde öğe ayrımı.

Hariç ::first-line, ::first-letter, ::beforeve ::after(IE8 desteği gerektiriyorsa ve tek nokta üst üste ile kullanılabilir iken hangi biraz etrafında olmuştur), yalancı elemanlar gerektiren çift iki nokta üst üste.

Sözde sınıflar gerçek öğeleri kendileri seçer , örneğin bir div'deki ilk veya belirli öğeleri seçmek için :first-childveya kullanabilirsiniz . (Ve ayrıca ve gibi gerçek öğelerin durumları .):nth-of-type(n)<p>
:hover:focus

Sözde öğeler , ::first-lineveya gibi bir öğenin bir alt bölümünü, ::first-letterkendi başına öğe olmayan şeyleri hedefler.


Aslında burada daha iyi açıklama: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Ayrıca burada: http://www.evotech.net/blog/2007/ 05 / sonrası v-sonrası-çift-kolon-notasyonu nedir /


6
Bu ayrım nedeniyle, "sözde seçici" (sorudan gelen) anlamsız bir terimdir. Onu asla kullanma.
BoltClock

1
ikisi hakkında konuşmadığınız sürece. veya genel terimlerle.
albert

1
Bu, teorinin harika bir açıklaması, ancak pratik meseleyle ilgisi var mı? Gerçekten css3 özelliğini kullanmanın, css2'nin aynı işi daha fazla tarayıcıda yapacağı şeklinde bir faydası var mı?
DRosenfeld

1
@Dominic teşekkürler - Yorumuma hitap ettiğiniz için teşekkür ederim. Hiç şüphe yok ki (en azından bu) CSS3 etiketi için destek sorunu şimdiye kadar neredeyse sorun olmaktan çıktı.
DRosenfeld

1
@ BorisD.Teoharov Özellikle, soru notlarında olduğu gibi tek iki nokta üst üste işaretini gerektiren IE8 haricinde aynı davranışı kullanabilir :afterve ::afterbirbirinin yerine kullanabilirsiniz .
Dominic

14

CSS Seçicileri ::after, DOM ağacında açık bir öğe olarak bulunmayan bazı sanal öğelerdir. Onlar "denir Sözde Elemanları " ve kullanılır eklemek : Bir elemanın önce / sonra bazı içerikler (örneğin ::before, ::after) bir kısmını seçin veya bir öğenin (örn: ::first-letter). Şu anda sadece 5 standart sözde elemanları vardır: after, before, first-letter, first-line, selection.

Öte yandan, bir elemanın (as ,, gibi ) özel bir durumunu tanımlamak için kullanılan " Sözde Sınıflar " adı verilen başka tür seçiciler de vardır . Bunlar, DOM'daki mevcut bir öğenin tamamını seçecektir. Sözde sınıflar, 30'dan fazla öğe içeren uzun bir listedir.:hover:focus:nth-child(n)

Başlangıçta (CSS2 ve CSS1'de), tek iki nokta üst üste sözdizimi hem sözde sınıflar hem de sözde öğeler için kullanıldı. Ancak BB3'te ::sözdizimi :, sözde unsurların daha iyi ayırt edilebilmesi için gösterimin yerini almıştır .

Geriye dönük uyumluluk için, eski tek kolon sözdizimi as gibi sözde öğeler için kabul edilebilir :after(tarayıcıların tümü hala eski sözdizimini bir noktalı virgülle destekler). Yalnızca IE-8 yeni sözdizimini desteklemez (IE8'i desteklemek istiyorsanız tek iki nokta üst üste kullanın).

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.