2015-04-20 27 views
9

CSS ve tipografiyi araştırıyorum ve sözde seçmenlerin bu ilginç kavramına rastladım. Tek kolonlu psuedo seçicilerini kullandım ve psuedo seçicilerinin çift kolonlu versiyonuna aşina değilim. I understand çift kolonuna sözde seçici yerine pseudo-element denir - ama neden? Ve fark nedir?CSS "::" vs ":" - sözde seçici vs psödo seçici?

Ayrıca, tek kolonun çok daha fazla desteklendiğini anlıyorum, bu nedenle çift kolonlu sözde öğeyi hangi durumda kullanırsınız? Çift kolonun gerekli olduğu durumlar var mı ve tek bir kolon işi bitirmez mi? bu durum ne olabilir?

"Sözde öğelerin aksine, sözde sınıflar, seçici zincirde herhangi bir yerde görünebilir." (linkten alıntı) - 'seçici zincir' ne bilmiyorum, ama bu aynı zamanda çift kolon yaklaşımının bir başka sınırlaması gibi görünüyor. Neden (benim anlayışımda) tek kolonun daha az desteklenen bir sürümü varsa çift kolon kullanmalıyım?

düzenleme: onlar işlevsel olarak aynı olmadığı görülmektedir: fiddle

<div><p>First Line</p></div> 
<div><p>Second Line</p></div> 

css

div:nth-child(1) > p { 
    color: green; 
} 

div::nth-child(2) > p { 
    color: blue; 
} 
+1

[MDN durumları] olarak (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements): "Bazen tek bir sayı yerine çift sütunları (: :) görürsünüz. :) Bu, CSS3'ün bir parçasıdır ve sözde sınıflar ve sözde öğeler arasında ayrım yapma girişimidir. Çoğu tarayıcı, her iki değeri de destekler. " – j08691

+0

https://developer.mozilla.org/en/docs/Web/CSS/:nth-child uyarınca nth-child bir yalancı sınıf seçicisidir, bu nedenle tekil kolon kullanmamalısınız. psedo elemanı seçicisi). –

+1

Neden dokümanlar sözde sınıfları çağırdığında onlara neden istekliler diyorsunuz? –

cevap

14

Sözde sınıflar (:) Eğer örneğin bir elementin farklı durumlarını stil izin Üzerine geldiğinizde, devre dışı bırakıldığında, ebeveynin ilk çocuğu olduğunda, vb.

Sözde öğeler (::), bir öğenin farklı bölümlerini örn. ilk satır, ilk harf, önce veya sonra içeriğin eklenmesi, vb.

Başlangıçta hepsi tek bir kolon kullandılar, ancak CSS3 ikisini ayırmak için çift kolonunu tanıttı.

+2

Tek kolonlu sözde içeriğin eklenmesiyle ilgili sorun yoktur. – Stickers

+0

Tarayıcılar, bazı sözde öğeler için tek sütunları destekleyebilir çünkü CSS2'de bu şekilde tanımlanmıştır. Diğer yandan, hiçbir tarayıcı, sözde sınıflar için çift kolonlara izin vermemelidir, çünkü bunlar asla bu şekilde tanımlanmamıştır. – scronide

+1

Bu yüzden: '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ı kullanamazken, '' '' 'hover' ile başarısız olur '',' '' herhangi bir durumda kullanabilir miyim? –