[CSS/DIV] Dört ana CSS öznitelik değer seçicisinin kullanımını analiz edin

Bu makale size bunu anlatacaktırCSS özellik değeri seçicisiÖzellik seçicisinin formatı, element, ardından parantez ve parantez ile nitelendirilen özellikler veya özellik ifadeleri (açıklamanın doğru olup olmadığını bilmiyorum, kendi yarattığım kelimeler), örneğin h1[title], h1[title="logo"], vb., bu makalede çok şey öğreneceğinize inanıyorum.

CSS Eğitimi: CSS Öznitelik Değeri Seçicisi

CSS AttributeSelectors, belki de nitelik seçicilere yabancı olmamalısınız, özünde id ve sınıf seçiciler aslında öznitelik değeri seçicilerdir, sadece id veya sınıf değerini seçin.

Özellik seçicisinin formatı, elementler ve ardından parantez gelmesi, parantez içinde nitelikler veya nitelik ifadeleri (açıklamanın doğru olup olmadığını bilmiyorum, kendi yarattığım kelimeler), örneğin h1[title], h1[title="Logo"], vb., aşağıdaki tartışmamdan 4 özel formu görebilirsiniz.

1. Basit CSS öznitelik değeri seçici

İsmi ne olursa olsun, bu basit öznitelik seçicisinin özelliğidir.

h1[sınıf]{renk:gümüş; sınıfın değeri ne olursa olsun, sınıfın herhangi bir h1 elemanı üzerinde etki eder. Bu nedenle<h1class="hoopla">Merhaba</h1>, <h1class="ciddi">Serenity</h1>, <h1class="fancy"> Fooling'in h1'i</h1> bu kuraldan etkilenecek.

Elbette, bu "özellik" sadece bir sınıf veya id değildir; aynı zamanda elemanın tüm meşru özellikleri olabilir, örneğin img[alt]{cssdeclarationshere; alternatif özniteliğe sahip herhangi bir img öğesine uygulanır. Sonra a[href][title]{font-weight:bold; Peki ya }? Bildiğiniz gibi, bu hem href hem de başlık özelliklerine sahip öğeler üzerinde çalışıyor, örneğin <atitle="W3CHome">W3C</a>.

2. Kesin CSS öznitelik değeri seçicisi

id ve class esasen tam öznitelik değeri seçicileridir, evet, h1#logo h1[id="logo"] ile eşittir. Daha önce de belirtildiği gibi, sadece id veya sınıfla sınırlı kalmıyoruz, herhangi bir mülkü kullanabiliriz! Örneğin, a[][title="W3CHome"]{font-size:200%; } <atitle="W3CHome">W3C'ye uygulanacaktır</a>.

3. Bazı CSS öznitelik değer seçicileri

Adından da anlaşılacağı gibi, öznitelik değeri kısmen eşleştiği sürece (bu durumda, kelimenin tamamıyla gerçekten eşleşen kısım) öğe üzerinde etki edecektir. Bir örnek bakalım:

Bunlardan herhangi biri p fontunu kalın yapabilir.

Bu seçici çok faydalıdır; örneğin, başlığında "Figure" dizesini içeren bir illüstrasyonu stilize etmek isterseniz, örneğin title="Figure5:xxx description" şeklinde img[title~="Figure"] kullanabilirsin.

İlk cümlede vurguladığım gibi, tüm kelimeyi eşleştirmeniz gerekiyor ve img[title~="Figure"] title="Figure5:xxx description" ile eşleşmeyecek.

Ayrıca küçük bir test yaptım, örneğinde "Figür"ü "İllüstrasyon" olarak değiştiriyorsun, img[title~="Figür"] ile img[title~="Illustration"] değiştiriyorsun ve kodlama GB2312 ya da UTF-8 olsun Firefox'ta eşleşiyor. Görünüşe göre Çince için CSS desteği kötü değil.

4. Özel CSS özellik değeri seçicisi

Bu seçici biraz garip. Böyle işliyor, örneğin örnek vermek anlatmaktan daha kolay.

*[lang|="en"]{color:white; Bu kural, lang özniteliğinin değerini veya en- ile başlayan elemanı seçer. Yani, <h1lang="en">Alo!</h1>, <plang="en-us">Selamlar!</p>ve <divlang="en-au">G'day!</div>ve eşleşmiyor<plang="fr">bonjour!</p>ve <h3lang="cy-en">Jrooana!</h3>.