Öznitelik seçici desenleri
[attr^=], [attr$=], [attr*=] desenlerini öğrenirsin.
Üç desen: ^, $, *
Öznitelik seçiciler yalnızca tam değer eşleştirmez. Üç desen öznitelik değerinin bir bölümüne bakar: ^ ön eke, $ soneke, * alt dizeye.
a[href^="https"] HTTPS bağlantılarını, a[href$=".pdf"] PDF bağlantılarını, a[href*="login"] içinde 'login' geçen bağlantıları bulur. Bu desenler bağlantı türüne göre otomatik stil vermek için idealdir ve gerçek temalarda sıkça karşına çıkar.
Hangi desen hangi iş?
Üç desen de benzer yazılır: köşeli parantez içinde öznitelik adı, işaret, eşittir ve tırnak içinde değer. Yalnızca işaret değişir.
[class^="btn-"] 'btn-' ile başlayan sınıfları yakalar; [src$=".webp"] WebP görselleri; [href*="map"] 'map' geçen tüm bağlantılar. Her biri farklı bir kullanım; hepsi gerçek sitelerde sıkça karşına çıkar.
Uygulama PDF bağlantılarını işaretle
Bir a[href$=".pdf"] seçicisi yaz ve içine color: maroon bildirimi ekle. Böylece PDF bağlantıları farklı renkte görünür.
Örnek çözümü göster
/* pdf bağlantılarını renklendir */
a[href$=".pdf"] {
color: maroon;
}Kendini test et
-
Bu seçici hangi bağlantıları yakalar?
a[href^="https"] { color: green; }- href özniteliği olmayanları
- href değeri 'https' ile bitenleri
- href değeri 'https' içerenleri
- href değeri 'https' ile başlayanları
Cevabı göster
href değeri 'https' ile başlayanları — Doğru. ^ işareti ön ek eşleştirir; 'https' ile başlayan bağlantılar yakalanır.
-
HTTPS bağlantılarını seç
a____ { color: green; }Cevabı göster
a[href^="https"] { color: green; } -
Deseni eşleştiği şeyle eşle
- a[href^="https"]
- https ile başlayan bağlantı
- a[href$=".pdf"]
- .pdf ile biten bağlantı
- a[href*="login"]
- login içeren bağlantı
- a[href]
- Herhangi bir bağlantı