Satır içi stillere sahip CSS Sözde sınıfları

Satır içi stilleri kullanan sözde sınıflara sahip olmak mümkün mü?

Misal:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Yukarıdaki HTML'nin çalışmayacağını biliyorum, ancak işe yarayacak benzer bir şey var mı?

Not: Harici bir stil sayfası kullanmam gerektiğini biliyorum ve kullanıyorum. Bunun satır içi stiller kullanılarak yapılıp yapılamayacağını merak ediyordum.

Hayır, bu mümkün değil. CSS kullanan belgelerde, bir satır içi styleöznitelik yalnızca özellik bildirimlerini içerebilir; bir stil sayfasında her kural kümesinde görünen aynı ifade kümesi. Gönderen Stil Spec Nitelikler :

Stil özniteliğinin değeri, aşağıda CSS çekirdek gramerinin terimleri ve kurallarında resmi dilbilgisi verilen bir CSS bildirim bloğunun (sınırlayıcı parantezler hariç) içeriğinin sözdizimiyle eşleşmelidir :

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

Ne seçicilere (sözde öğeler dahil), ne de kurallara veya başka herhangi bir CSS yapısına izin verilmez.

Satır içi stilleri, bazı anonim süper belirli kimlik seçicilere uygulanan stiller olarak düşünün: bu stiller yalnızca styleözniteliğe sahip tek çok öğe için geçerlidir . (Bu öğe bu kimliğe sahipse, stil sayfasındaki bir kimlik seçiciden de öncelik alırlar.) Teknik olarak bu şekilde çalışmaz; bu sadece özniteliğin neden sözde sınıf veya sözde öğe stillerini desteklemediğini anlamanıza yardımcı olmak içindir (sözde sınıfların ve sözde öğelerin, belge ağacında ifade edilemeyen soyutlamaları nasıl sağladığıyla daha fazla ilgisi vardır. belge dili).

Satır içi stillerin, kural kümelerindeki seçicilerle aynı kademeye katıldığını ve kademede en yüksek önceliği aldığını unutmayın ( !importantbuna rağmen). Bu yüzden sözde sınıf devletlerden bile önceliklidirler. Satıriçi stillerde sözde sınıflara veya diğer seçicilere izin vermek, muhtemelen yeni bir kademeli düzey ve bununla birlikte yeni bir karmaşıklık dizisi getirecektir.

Ayrıca, Stil Nitelikleri spesifikasyonunun çok eski revizyonlarının başlangıçta buna izin vermeyi önerdiğini , ancak muhtemelen yukarıda belirtilen nedenle veya uygulamanın uygun bir seçenek olmadığı için hurdaya çıkarıldığını unutmayın.

CSS değil, ancak satır içi:

<a href="#" 
   onmouseover = "this.style.textDecoration = 'none'"
   onmouseout  = "this.style.textDecoration = 'underline'">Hello</a>

Örneğe bakın →

Satır içi CSS kullanmak yerine Dahili CSS kullanabilirsiniz

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Şunlara sahip olabilirsiniz:

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>

Https://hacss.io deneyebilirsiniz :

<a href="http://www.google.com" class=":hover{text-decoration:none;}">Google</a>

gösteri