Zincirde sahte seçiciler CSS ile pratik kara büyü

Psödoselektör CSS, sitenin altında yatan PHP’ye dokunamadığınızda çok yardımcı olur. Bugünün makalesi, küçük işletme WordPress müşterileriyle çalışma deneyimimden geliyor. Bu müşteriler genellikle değiştiremeyeceğiniz çok sayıda PHP kodu ile size gelir. Örneğin, sosyal paylaşım eklentilerini ve sayfa yapımcılarının temalarını birleştirmeye çalışırlar ve neredeyse başarılıdır, ancak bir veya iki ekran ayrıntısını düzeltemezler. “Her şeyi atın” bir seçenek değildir ve kimse tema veya spagetti eklenti kodu ile tartışmaya çalışmaz. Bu tür bir proje beni ürpertiyor, ancak gerçek ihtiyaçları olan iyi müşteriler genellikle kendilerini bu tür bir ortamla buldukları için, elbette en iyisi onlara nasıl yardım edileceğini bilmek. Pseudoselector CSS, altta yatan PHP’ye dokunamadığınızda çok yararlı bir web geliştirme alanıdır – bu yüzden bugün, CSS’nin karanlık büyüsü hakkında biraz bilgi edineceğini öğrenelim.
Pseudoselectors’a Giriş Psödoselektör CSS, CSS’nin web sayfalarındaki belirli öğeleri akıllıca seçme ve bunun tersine mümkün olmayan bir değişiklik yaratma gücünü önemli ölçüde genişletti. Sahte sınıf ve sözde öğeler, CSS’de şuna benzeyen herhangi bir şey için genel bir terim olarak “CSS Psödoselectors” i kullanıyorum :: Selector. Bu “şeyler” iki duygu içinde gelir: sözde sınıflar ve sahte unsurlar. Pseudo sınıfı sahte sınıf, bu öğelerle ilgili doğru şeylere dayanarak sayfadaki öğeleri seçer. İşte çok ünlü iki örnek:
A: Ziyaret edildi {Color: Mor; } Bu, daha önce ziyaret edilen bağlantıyı Mor olarak değiştirecektir. Daha önce ziyaret edilen pancar,: ziyaret edilen, sahte bir sınıftır. Li: ilk çocuk {arka plan-color: #aaa; } Bu, kardeşleri arasında ilk olan her Li elemanı için parlak granın arka planını ayarlayacaktır: ebeveynin ilk çocuğu (bir OL veya UL elemanı olmalıdır). Sahte öğeler sözde öğeler biraz daha karmaşık ve yeterince güçlüdür: gerçekten mümkün olmayan CSS kullanarak web sayfalarında içerik oluşturmanıza izin verirler. En yaygın örnek: sonra: a: sonra {content: “Beni tıklayın!” yazı tipi boyutu: .8em; } Bu küçük bir “Beni tıklayın!” Sitenizdeki her bağlantıdan sonra doğrudan metin – ki bu tavsiye etmiyorum. : İkiz bir erkek kardeşi olduktan sonra,: Daha önce, benzer işlev gören ancak içeriği daha önce yerleştirir ve seçilen öğeden sonra değil. Bu sahte öğenin ClearFix hacklemesinden yazı tipi simgelerine kadar birçok kullanımı vardır, bu yüzden anlamak çok değerlidir. Okumak! Bu makale şu ana kadar sizin için yeni bir haberse, W3 okullarında basit bir gösteri okumanızı ve takip etmenizi öneririm. Sahte sektörü anlasanız bile, sözde sınıfların ve sahte öğelerin tam listesini kontrol etmenizi şiddetle tavsiye ederim, çünkü bilmediğim bazıları var!
Psödoselektörler CSS daha ilginç :: değil ,: nth-child CSS3, çok yararlı olan birkaç yeni sahte sınıf getiriyor: değil: nth-child :: değil (p) {color: #000; } Bu, paragraf olmayan herhangi bir şeyden metni siyah olarak değiştirir (P). Li: nth-child (3) {ekran: yok; } Bu, ebeveyninin üçüncü çocuğu olan herhangi bir LI sayfa düzeninin akışını gizler ve kaldırır. Bu yeni CSS3 sözde sınıfı, modern çağda gerçekten korkunç olan son ana tarayıcı olan IE8’den daha yeni bir şey üzerinde çalışıyor. Şimdi IE8 nihayet%1’den az bir pazar payı var, daha güvenle kullanmaya başlayabiliriz. Dahası, eğer bu şimdiye kadar haberse, yapılacak bazı iyi okumalar var. Bu Smashing dergisi makalesi iyi bir başlangıç. CSS Psödoselektörler Zinciri Psödoselektör CSS’yi oldukça karmaşık bir değişiklik yapmak için bağlayabiliriz. Burada, oldukça karmaşık bir değişiklik yapmak için zincirleme – birleştirme – sözde psödoselektörler hakkında konuşacağız. Bu, genellikle hem JavaScript hem de PHP sitelerine erişime ihtiyaç duyduğumuz birçok sorunu çözmemizi sağlayan şey budur. NAV WPSHOUT menüsünü kullanarak bir örnek verdim. Örneğin aptalca, ancak birçok gerçek müşteri isteğini yansıtır. Diyelim ki NAV WPSOUT menüsündeki aşağıdaki değişikliklerin daha fazla trafik getireceğini düşünüyorum:
Bununla birlikte, sorun budur: Bu taklit örneğinde, NAV wpsout menüsü, gömülü ve konuşması imkansız bir grup şablon dosyası ile kötü bir şekilde yazılmış bir tema tarafından üretilir-PHP’nin düzenlenmesi değerinden çok daha zahmetlidir. .Sahip olduğumuz tek şey, tema tarafından üretilen işaretleme ve CSS sitesini düzenleme yeteneğidir. Yapmamız gereken şey: İşaretleme Menüsü Aşağıda, önde gördüğümüz işaretlemenin basit bir sürümüdür (bir Chrome geliştiricisi veya benzeri kullanarak ):