CSS'de değeri olan bir niteliğe sahip öğeleri nasıl hedeflerim?

CSS'de belirli bir niteliğe sahip öğeleri hedefleyebileceğimi biliyorum, örneğin:

input[type=text]
{
    font-family: Consolas;
}

Ancak, herhangi bir değere sahip bir özniteliğe sahip öğeleri hedeflemek mümkün müdür (hiçbir şey hariç, yani öznitelik öğeye eklenmemişse)?

Kabaca şöyle bir şey:

a[rel=*]
{
    color: red;
}

<a>Bu HTML'deki birinci ve üçüncü etiketleri hedefleyen :

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

Bunun mümkün olduğunu düşünüyorum çünkü varsayılan olarak, niteliği için bir değeri olan cursor: pointerherhangi bir <a>etikete uygulanmış gibi görünüyor href.

Aşağıdakiler, reltanımlanmış bir öznitelik ile herhangi bir bağlantı etiketiyle eşleşecektir :

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Güncelleme: @vsync'de bahsedilen senaryoyu hesaba katmak için, yorum bölümünde (emtpy / boş olmayan değerler arasında ayrım yaparak), CSS :not sözde sınıfını dahil edebilirsiniz :

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Evet, CSS 3 seçicilerinde birkaç öznitelik seçicisi vardır .

Örneğin

[att] Özniteliğin değeri ne olursa olsun, att özniteliğine sahip bir öğeyi temsil eder.

[att = val] Att özniteliğine sahip, değeri tam olarak "val" olan bir öğeyi temsil eder.

[att ~ = val] Att özniteliğine sahip, değeri boşluklarla ayrılmış bir sözcük listesi olan ve biri tam olarak "val" olan bir öğeyi temsil eder. "Val" boşluk içeriyorsa, hiçbir zaman hiçbir şeyi temsil etmeyecektir (çünkü sözcükler boşluklarla ayrılmıştır). Ayrıca "val" boş dizge ise, hiçbir zaman hiçbir şeyi temsil etmeyecektir.

[att ^ = val] Değeri "val" önekiyle başlayan att özniteliğine sahip bir öğeyi temsil eder. "Val" boş dizeyse, seçici hiçbir şeyi temsil etmez.

[att $ = val] Değeri "val" sonekiyle biten att özniteliğine sahip bir öğeyi temsil eder. "Val" boş dizeyse, seçici hiçbir şeyi temsil etmez.

[att * = val] Att özniteliğine sahip, değeri "val" alt dizesinin en az bir örneğini içeren bir öğeyi temsil eder. "Val" boş dizeyse, seçici hiçbir şeyi temsil etmez.

Bir tarayıcı varsayılan olarak bir öznitelik ayarlarsa, geçici bir çözüm bulmanız gerekebileceğini eklemelisiniz. Bu, "modern" tarayıcılarda bir sorun olarak görünmüyor, ancak bu gördüğüm bir sorun, bu nedenle tarayıcılar arası performansı kontrol ettiğinizden emin olun.

Örneğin, 9'dan önceki IE'de colSpan'ın bir Tablodaki tüm TD'ler için ayarlandığını, yani herhangi bir hücrenin gizli colspan değeri 1 olduğunu keşfettim.

Dolayısıyla, webdoc'unuza uyguladığınız "colspan özelliği olan herhangi bir TD" yi hedefliyorsanız, herhangi bir TD'nin tek bir hücre olması gibi, td'nin colspan özellik kümesine sahip olmaması bile css stilini alacaktır. IE'nin 9'dan az olması temelde hepsine stil kazandıracak!

Bununla ilgili endişelenmenin tek nedeni, IE8'in üzerine yükseltme yapamayan geri kalan tüm XP kullanıcılarıdır.

Yani Örneğin, içeriğin uçtan uca kayabileceği ve sonunda veya başında 1'den 7'ye kadar hücre boş bırakan bir tablo grubum var.

Colspan özelliğini kullanarak herhangi bir boş hücrenin sonunda veya başında bir renk uygulamak istiyorum. Aşağıdakileri kullanmak IE'de 9'dan az çalışmayacaktır

#my td[colspan] {background-color:blue;}

... tüm tank avcıları şekillenecek (komik, çünkü koşullu nitelik stili IE'de sözde üstündü, ama konu dışına çıkıyorum ...).

Herhangi bir tek hücre / TD için colspan değerini 'single' olarak ayarladığımda aşağıdaki çalışmaları tüm tarayıcılarda kullanmak, stil şemasına dahil etmek istediğim, ancak bir 'hack' ve uygun şekilde doğrulamayacak ...

#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}

Alternatif olarak, geçersiz kılmak için "if lt IE 9" kullanarak koşullu stil kullanarak sorunu daha uygun bir şekilde çözebilmelisiniz. Bunu yapmanın doğru yolu bu olacaktır, sadece "düzgün yapılandırılmış css" i bu süreçte IElt9'dan gizlemeniz gerektiğini unutmayın ve bunu yapmanın tek doğru yolu seçici stil sayfaları kullanmaktır.

Çoğumuz zaten bunu zaten yapıyoruz, ancak ne olursa olsun, bir tarayıcının hiçbirini görmediğinde bir otomatik öznitelik uygulayıp uygulamadığını ve öznitelik değerlerinde stil vermek için başka türlü doğru sözdizimini nasıl işleyebileceğini düşünmeniz ve test etmeniz iyi olur.

(btw, colspan henüz css belirtiminde değil [css3 itibariyle], bu nedenle bu örnek hiçbir doğrulama hatası vermez.)