CSS3 Tip İlk Tip Yapısal Seçiciye Bir Bakış
CSS3'ü sevdiğim tek şey, özellikle yeni ürünlere güvenmeden öğeleri hedeflememize izin veren seçicilerin eklenmesidir. sınıf, İD ya da diğer element niteliği, ve burada ele alacağımız şey aşağıdaki seçici, : Birinci tip.
: Birinci tip seçici, belirtilen öğenin ilk alt öğesini hedef alır; örneğin, aşağıdaki kod parçacığı ilk hedefi h2 web sayfasında.
h2: türün ilk örneği / * stil bildirimi * /
: Birinci tip ayrıca eşittir : İnci-of-tip (1), sadece seçmek yerine ilk türden, ikinciyi, üçüncüyü vb. seçebiliriz. Aşağıdaki kod parçası ikinciyi hedefler h2 web sayfasındaki öğe.
h2: tür (2) / * stil bildirimi * /
: Birinci tip” vs. “:ilk çocuk”
Bu iki seçici aynı şeyi yapıyor gibi görünebilir, ancak durum böyle değil. Aşağıdaki gösteriyi görelim:
Diyelim ki, içine sarılmış beş paragraf öğemiz var. div, bunun gibi:
1. Fıkra
2. Fıkra
Fıkra 3
4. Fıkra
5. Fıkra
Şimdi, ilk paragrafı seçmek için :ilk çocuk selektör.
p: birinci çocuk dolgu: 5px 10px; sınır yarıçapı: 2 piksel; arkaplan: # 8960a7; renk: #fff; sınır: 1px katı # 5b456a;
Beklediğimiz gibi, ilk paragraf başarıyla seçildi.
- : ilk çocuk Demosu
Ancak, biz ne zaman önce farklı bir öğe ekle ilk paragraf, diyelim ki bir h1, aşağıdaki snippet gibi:
Başlık 1
1. Fıkra
2. Fıkra
Fıkra 3
4. Fıkra
5. Fıkra
ilk paragraf seçilmeyecek, içindeki ilk çocuk olarak div olduğu artık bir paragraf, ama şimdi bir h1.
Yani, bu durum : Birinci tip seçici sorunu çözmeye geliyor.
p: türün ilk örneği dolgu: 5px 10px; sınır yarıçapı: 2 piksel; arkaplan: # a8b700; renk: #fff; sınır: 1 piksel katı # 597500;
- : türünün ilk örneği Demo
“Son” selektör
Nerede “ilk”, o zaman da olacak “son”.
Yukarıda tartıştığımız iki seçicinin tersi aşağıdaki iki seçiciden; : Geçen-çocuk ve : Son-tipi. Temelde yukarıdaki iki ile aynıdır, ancak belirtilen öğenin son çocuğu.
Örneğin, aşağıdaki bu snippet, div içindeki son paragrafı hedefler.
p: son çocuk dolgu maddesi: 5px 10px; sınır yarıçapı: 2 piksel; arkaplan: # 8960a7; renk: #fff; sınır: 1px katı # 5b456a;
- : son çocuk Demosu
Ve bu pasaj, yukarıda bahsettiğimiz aynı durumda son paragrafı da hedefleyecektir; bu sefer doğrudan farklı bir unsur tarafından takip edilir.
p: türünün sonuncusu padding: 5px 10px; sınır yarıçapı: 2 piksel; arkaplan: # a8b700; renk: #fff; sınır: 1 piksel katı # 597500;
- : türünün sonuncusu Demo
Seçici
CSS3'teki diğer yeni özellikler gibi, bu seçiciler eski tarayıcılarda, özellikle de eski tarayıcılarda desteklenmez. Internet Explorer 6 - 8, istisna dışında :ilk çocuk seçici, CSS2.1'den beri eklendiği gibi. Onun akrabası : Geçen-çocuk sadece CSS3’e eklendi.
Yani, burada bahsettiğimiz tüm bu seçiciler web siteniz için gerçekten gerekliyse, adında bir JavaScript Kütüphanesi kullanabilirsiniz. Selectivizr bu CSS3 seçicinin işlevselliğini taklit etmek.
Selectivizr, jQuery, Dojo, Prototype ve MooTools gibi çalışmak için diğer JavaScript Kütüphanelerine bağımlıdır; ve resmi web sitesindeki karşılaştırma tablosundan bakıldığında, MooTools tüm seçicileri idare edebilecek gibi görünüyor.
Öyleyse, Selectivizr ile birlikte aşağıdakileri ekleyelim:
Yukarıdaki şartlı yorum, bu kitaplıkların yalnızca Internet Explorer 8 ve daha altına yüklenmesini sağlayacaktır..
Son olarak, demosu aşağıdaki bağlantılardan görüntüleyebilirsiniz ve şimdi hem modern hem de eski tarayıcılarda çalışmalıdır (IE8 ve altı). Daha fazla inceleme için kaynak dosyayı da indirebilirsiniz. Keyfini çıkarın.
- gösteri
- Kaynak İndir
