CSS Seçiciler
CSS Seçiciler
Seçici motoru, CSS seçici metnini yapılandırılmış forma dönüştürür ve DOM ağaçları üzerinde değerlendirir. Hem doğrudan sorguları hem de cascade kural eşleştirmesini destekler.
Seçicileri Çalıştırma
select() bir seçiciyi bir ağaç üzerinde değerlendirir ve eşleşmeleri döndürür; element_matches() tek bir öğeyi test eder. Her ikisi de standart seçici sözdizimini — tip, sınıf, kimlik, öznitelik ve pseudo-sınıf seçicileri, birleşik ve karmaşık kombinasyonlar dahil — kabul eder.
Çözülmüş Seçici Yapıları
parse(), TypeSelector, ClassSelector, IDSelector, AttributeSelector (with AttributeOperator), UniversalSelector ve Combinator parçalarından oluşturulan ComplexSelector ve CompoundSelector girişlerinden oluşan bir SelectorList üretir.
Pseudo-Sınıflar
Fonksiyonel pseudo-sınıflar açıkça modellenir: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass ve yapısal nth-child varyantları NthFilteredChildPseudoClass üzerinden NthArgument ile.
Specificity
specificity(), bir seçici için standart üç bileşenli demeti hesaplar ve max_specificity() bir listeyi azaltır; match() ayrıştırma ve değerlendirmeyi birleştirir. Bunlar, kademenin kullandığı aynı değerlerdir, bu yüzden sorgu sonuçları ve hesaplanan stiller her zaman uyumludur.
İpuçları ve En İyi Uygulamalar
- Filtrelerin içinde
element_matches()kullanın, her öğe içinselect()’i yeniden çalıştırmak yerine - Bir kez ayrıştırın ve aynı seçici birçok ağaçta çalıştırıldığında
SelectorList’ı yeniden kullanın - Bir kural beklenmedik şekilde kademeyi kaybettiğinde,
specificity()değerlerini doğrudan karşılaştırın
Yaygın Sorunlar
| Sorun | Neden | Düzeltme |
|---|---|---|
| Seçici hiçbir şeyle eşleşmiyor | Seçici metninde sözdizimi hatası | parse(), syntax_error aracılığıyla tetikler — mesajı kontrol edin |
| Eşit özgüllük bağları “yanlış” şekilde çözülür | Sıra bağımlılığı | Daha sonraki kurallar eşitliği kazanır; kural sırasını kontrol edin |
:is() vs :where() karışıklığı | :where() sıfır özgüllük katkısı sağlar | İstenen kademeli ağırlığa göre seçin |
FAQ
Bir öğeyi bir seçiciye karşı nasıl test ederim?
element_matches() — ağaç taraması yapmadan bir boolean döndürür.
Özgüllük nasıl hesaplanır?
specificity() standart (id, class, type) bileşen demetini döndürür; :where() grupları sıfır katkı sağlar.
Hangi pseudo-sınıflar destekleniyor?
Yapısal formlar API içinde: :is(), :where(), :has(), :not() karmaşık argümanlarla ve nth-child tarzı yapısal seçiciler.
API Reference Özeti
| Sınıf/Yöntem | Açıklama |
|---|---|
select | Bir seçiciyi ağaç üzerinde değerlendir |
element_matches | Bir öğeyi test et |
parse | Seçici metnini bir SelectorList içine ayrıştır |
specificity | Spesifiklik demetini hesapla |
HasPseudoClass | Yapılandırılmış :has() formu |
AttributeSelector | Operatörlerle öznitelik eşleştirici |