CSS3 Olumsuzluğuna Bir Bakış (NOT) Seçici
CSS, aşağıdaki gibi belirli koşullarda öğeleri seçmenize izin veren bazı seçicilere sahiptir. : hover, : odak, :aktif, vb. Ancak bugün bu seçicileri ele almayacağız. Halen az bilinen bir yöntem olan ancak çoğu web tasarımcısı tarafından kullanılan bir tanesine bakacağız. :değil seçici veya olumsuzlama seçicisi olarak da bilinir.
Bu ne işe yarıyor?
Eminim ki :değil adın kendisi zaten işlevini tanımlamış, sadece seçecek belirtilen öğenin veya koşulun karşıtı. Örneğin:
Bu sözdizimi, dışındaki herhangi bir öğeyi seçer. p (paragraf).
: (P) Aşağıdaki örnek sözdizimini seçmek div yapan eleman değil ders al ABC
div: not (.abc) Pekala, şimdi, bu seçiciyi gerçek bir örnekte deneyelim:
Öncelikle, Wikipedia'dan birkaç bağlantı ve kurgusal alanlara birkaç bağlantı içeren birkaç paragraf yapalım. İşte paragraf için HTML işaretlemesi.
CSS: Seçici Gösteri değil
Jujubes Uygulaması Susam Chupa Chups Snaps çikolatalı kek. Yulaflı kek lokum wypas şekerleme çörek kek. Chupa chups jöle kek gummi ayıları. Limonlu kek gofret damla.
Cheesecake çikolatalı pasta çörek jöle tatlı rulo tozu sufle ??  ?? Ã' © çikolatalı kek. Wypas pamuk şekeri limonlu kurabiye şekeri çörek bonbon badem ezmesi damla. Acıbadem kurabiyesi şeker meyankökü jöle-o. Çikolatalı pasta tatlı rulo şeker hatmi dragà ??  ?? Ã' © e pamuk şekeri kek marshmallow.
Puding tepesi marshmallow ayı pençesi. Pasta çörek pasta sakızları meyveli kek kek jöle zencefilli susam oturana. Şeker pudingi kek ayı pençesi. Havuçlu kek kek pamuk şeker tootsie rulo çörek. Jelly beans tart sürükle à ??  'e © e tatlı buzlanma gofret çikolata bar tepesi. Tatlı rulo şekerleme şeker erikli pasta dragà ??  ?? Ã' © e bonbon şekeri çörek.
Kek badem ezmesi uygulaması hamur işi Wypas meyveli kek. Yulaflı kek çikolata wypas dragà ??  ?? Ã' © e şeker erikli havuçlu kek sosu. Karamelli çikolata bar kruvasan gofret kek pasta çikolata bar jujubes. Bisküvi şeker kamışı dragà ??  ?? à '© e.Candy brownie yulaflı kek susam cheesecake tozu tootsie rulo bisküvi ayı pençe oturana. Sufle ??  ?? Ã' © gummi jöle fasulyesi susam ayılar faworki ayılar kurabiye tatlı tatlı bonbon.
Buradaki plan şudur: Yalnızca Vikipedi'ye işaret etmeyen bağlantıları seçeceğiz ve daha sonra bu bağlantılara, bu bağlantılara dikkatini çekecek bir ünlem işareti vereceğiz..
İlk önce bir ekleyeceğiz :sonra Sözde yerleştirmek için tüm bağlantılar üzerinde sözde eleman içi blok eleman.
a: after ekran: satır içi blok;
Ardından, Wikipedia’ya işaret etmeyen her bir bağlantıyı seçmek için :değil öznitelik seçicili seçici. Buradaki nitelik seçici, href niteliğinin başladığı her çapa etiketini seçer. http://en.wikipedia.org/ ve onu birleştirerek :değil, açıkça tersini seçecektir. İşte başlıyoruz:
a: not ([href ^ = "http://en.wikipedia.org/"]): sonra background-color: # F8EEBD; sınır: 1px katı # EEC56D; kenarlık yarıçapı: 3px 3px 3px 3px; renk: # B0811E; içerik: "!"; yazı tipi boyutu: 10pt; sol kenar boşluğu: 5 piksel; dolgu maddesi: 1px 6px; pozisyon: göreceli;
İşe yarıyor! Vikipedi'ye işaret etmeyen bağlantı etiketlerinde artık ünlem işareti var..
Chrome Bug
Bunu Chrome'da görüntülerseniz, oluşturulan efektin yukarıdaki gibi olmadığını fark edeceksiniz. URL’den bağımsız olarak, tüm bağlantıların ünlem işareti olduğu görülüyor..
Bu dava aslında bir hata olarak ele alınmıştır. Bu hatayı düzeltmek için bu kuralı eklemeliyiz.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: satır içi blok;
Ve şimdi problem çözülmeliydi.
- gösteri
Sonuç
Bazı durumlarda :değil seçici gerçekten de en etkili seçenektir, tıpkı yukarıdaki örnekte olduğu gibi, bazı rasgele unsurları gereksiz sınıf bile eklemeden seçebiliyoruz veya belgeye ek işaretleme yapabiliyoruz..
Bu seçiciyi kullanarak gerçekten harika efektler oluşturabilirsiniz ve bu bir örnektir: CSS3 ile Filtre İşlevselliği
