a:link veya div::after...

Fark hakkında bilgi kıt gibi görünüyor.

CSS 3 selector recommendation Her iki konuda oldukça açık, ama yine de farklılıklar göstermeye çalışacağım.

Pseudo-sınıfları

Resmi açıklama

Pseudo-sınıf konsept seçimi belge ağacı dışında yer alan bilgilere dayanan veya bunu yapamazsınız ifade izin vermek için diğer basit seçiciler kullanarak tanıttı.

Pseudo-sınıf her zaman "" (:) parantez arasında bir değer tarafından pseudo-sınıf ve isteğe bağlı olarak adından. kolon oluşur

Pseudo-sınıfları basit seçiciler seçici içerdiği tüm dizileri izin verilir. Pseudo-sınıfları önde gelen yazdıktan sonra herhangi bir yere basit seçiciler dizileri, ya da evrensel seçici seçici izin verilir (muhtemelen atlanmış). Pseudo-sınıf isimleri büyük / küçük harfe duyarlıdır. Bazı sınıflar pseudo Diğerleri aynı elemana aynı anda Uygulanabilir ise, birbirini dışlayan. Bir kullanıcı belge ile etkileşim sırasında Pseudo-sınıfları dinamik olabilir, bir öğe kazanmak ya da kaybetmek olabilir, bu anlamda bir pseudo-sınıfı.

Source

Bu ne anlama geliyor?

Pseudo-sınıfları önemli doğa ilk cümleyle ifade edilir:< . em ^"pseudo-sınıf kavramı [...]seçim izin verir". Elemanları bilgilere dayanarak arasında farklı bir stil yazarı sağlar< . em ^"belge ağacı DIŞINDA kalır"bir link(,*:active*6)Bu. mevcut durumu örneğin O her yerde DOM kaydedilmez ve DOM arayüzü bu seçeneklere erişmek için var orada.

Diğer taraftan, :target DOM manipülasyon (JavaScript ile nesne bulmak için window.location.hash kullanabilirsiniz), ama bu erişilen olabilir< . em ^"cannot ifade diğer basit seçiciler kullanarak".

Yani Kısacası sözde sınıf sequence of simple selectors simple selector diğer olarak seçilen öğeleri kümesi ürünlerdir. Basit seçiciler dizisi tüm basit seçiciler aynı zamanda değerlendirilecektir unutmayın. Pseudo-sınıf tam listesi CSS3 seçici önerisi onay için.

Örnek

Aşağıdaki örnek, tüm çift satır rengi gri (#ccc), 5 beyaz dividable olmayan düzensiz satır ve her satırda kırmızı.

table tr:nth-child(2n) td{
   background-color: #ccc;
}

table tr:nth-child(2n 1) td{
   background-color: #fff;
}

table tr:nth-child(2n 1):nth-child(5n) td{
   background-color: #f0f;
}

Sözde elemanlar

Resmi açıklama

Sözde elemanlar bu belge dil tarafından belirtilen ötesinde belge ağacı hakkında soyutlamalar oluşturun. Örneğin, belge dilleri mekanizmaları bir elemanın içeriğinin ilk harfi ya da ilk satırı erişimi için sunmuyoruz. Sözde elemanlar yazarlar aksi ulaşılmaz bu bilgileri ifade etmek için izin verir. Sözde elemanlar da bulunur yazarları bir şekilde ifade etmek için içerik yok kaynak belge (örneğin, ::before ::after pseudo-elements ver erişmek için oluşturulan içerik).

Pseudo-element, iki nokta üst üste (::) pseudo-element adından yapılır.

:: Bu gösterim, pseudo-sınıflar arasında bir ayrımcılık oluşturabilmek için geçerli belge tarafından sunulan ve sözde elemanları. Uyumluluk için varolan stil sayfaları, kullanıcı arayüzleri de kabul önceki-kolon gösterimi için pseudo-elements sunulan CSS Düzey 1 ve 2 (yani, birinci satır, birinci mektup :önce ve sonra). Bu uyumluluk yeni sözde elemanlar bu özellikleri tanıttı için izin verilmez.

Sadece bir pseudo-element seçici başına görünebilir, ve varsa, seçici konuları temsil eden basit seçiciler dizisi sonra görünmesi gerekir.

Not: birden fazla izin verebilir bu şartname, gelecekteki Bir sürümüne pseudo-elements başına seçici.

Source

Bu ne anlama geliyor?

En önemli kısmı burada"pseudo-elements yazarlar izin vermek için[..] aksi ulaşılmaz bilgi bakın"ve onlar bunu"da bulunur yazarları bir şekilde ifade etmek için içerik yok kaynak belge (örneğin, ::before ::after pseudo-elements ver erişmek için oluşturulan içerik).". En büyük fark aslında hangi kurallar ve pseudo-sınıf seçiciler bile uygulanabilir yeni sanal bir öğe oluşturun. Yok filtre elemanları, onlar temelde filtrele (::first-line,::first-letter) ve sarma bir sanal konteyner, hangi yazarın tarzı olabilir ancak o (neredeyse).

Örneğin ::first-line pseudo-element olamaz yeniden inşa ile JavaScript olarak bağlıdır mevcut kullanılan yazı tipi, yazı tipi boyutu, elemanlarının genişlik, kayan eleman (ve muhtemelen gün). Bir de bütün bu değerleri hesaplamak ve ilk satırı ayıklamak olabilir, ancak bunu yaparken çok hantal bir faaliyettir. Eh, bu tamamen doğru değil:

En büyük fark bu sanırım< . em ^"tek bir pseudo-element seçici başına görünebilir". Not bu değişiklik tabi olabilir, ama 2012 geleceği (it's still in CSS4) herhangi bir farklı davranış görüyoruz inanmıyorum diyor.

Örnek

Aşağıdaki örnek, dil-etiket belirli bir sayfa kullanarak her alıntı pseudo-sınıfı :lang ve pseudo-element ::after: ekleyecektir

q:lang(de)::after{
    content: " (German) ";
}

q:lang(en)::after{
    content: " (English) ";
}

q:lang(fr)::after{
    content: " (French) ";
}

q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

TL;DR

Pseudo-sınıfları seçiciler bir dizi basit seçiciler olarak hareket ve böylece non-görsel özellikleri üzerinde öğeleri sınıflandırmak, pseudo-elements yeni sanal öğeleri oluşturun.

Referanslar

W3C

• Selectors Level 3
  • 4. Selector syntax
  • 6.6 Pseudo-classes
  • 7. Pseudo-elements
• CSS 2.1 Specification () ama hala eski bilgilendirici
  • 5.2 Selector syntax:

    Basit bir seçici ya da bir tür evrensel seçici veya seçici hemen sıfır veya daha fazla öznitelik seçiciler ID seçiciler ardından, ya da pseudo-sınıfları, herhangi bir sırada. Basit seçici eğer tüm bileşenlerini uyuyorsa uyuyor.

    5.10 Pseudo-elements and pseudo-classes