Bir öğe adına bir CSS stili uygulayabilir miyim?

Şu anda CSS stillerini uyguladığım HTML üzerinde hiçbir kontrole sahip olmadığım bir proje üzerinde çalışıyorum. Ve HTML, öğeler arasında ayrım yapmak için yeterli kimlik ve sınıf bildirimi olmadığı için çok iyi etiketlenmemiştir.

Yani, id veya sınıf özniteliği olmayan nesnelere stil uygulayabileceğim yollar arıyorum.

Bazen, form öğelerinin "name" veya "value" özelliği vardır:

<input type="submit" value="Go" name="goButton">

Name = "goButton" 'a dayalı bir stil uygulayabilmemin bir yolu var mı? "Değer" ne olacak?

Bulması zor bir şey çünkü bir Google araması, web sayfalarında "ad" ve "değer" gibi geniş terimlerin görüneceği her türlü örneği bulacaktır.

Cevabın hayır olduğundan şüpheleniyorum ... ama belki birisinin akıllıca bir kesmek var?

Herhangi bir tavsiye büyük mutluluk duyacağız.

Özellik seçiciyi kullanabilirsiniz,

input[name="goButton"] {
  background: red;
}

<input name="goButton">

IE6'da desteklenmediğini unutmayın.

Güncelleme: IE6 öldüğü için 2016'da bunları istediğiniz gibi kullanabilirsiniz. http://quirksmode.org/css/selectors/

http://reference.sitepoint.com/css/attributeselector

Metin Girişi Örneği

input[type=text] {
  width: 150px;
}

input[name=myname] {
  width: 100px;
}

<input type="text">
<br>
<input type="text" name="myname">

Öznitelik seçicileri kullanabilirsiniz, ancak meder'ın dediği gibi IE6'da çalışmazlar, bu tho için javascript geçici çözümleri vardır. KontrolSeçiciyi

Özellik seçiciler hakkında daha ayrıntılı bilgi: http://www.css3.info/preview/attribute-selectors/

/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }

Gelecekteki googlerslar için, @meder tarafından verilen yanıttaki yöntem olan FYI, ad özniteliğine sahip herhangi bir öğeyle kullanılabilir, bu yüzden <iframe>adıyla birlikte bir diyelim , xyzsonra kuralı aşağıdaki gibi kullanabilirsiniz.

iframe[name=xyz] {    
    display: none;
}   

Bu nameözellik aşağıdaki öğelerde kullanılabilir:

• <button>
• <fieldset>
• <form>
• <iframe>
• <input>
• <keygen>
• <map>
• <meta>
• <object>
• <output>
• <param>
• <select>
• <textarea>

Sorunuzu hemen anlarsam,

Evet, kimliği veya adı varsa tek tek öğelerin stilini ayarlayabilirsiniz,

Örneğin

id kullanılabilir ise u gibi öğe üzerinde kontrol alabilirsiniz,

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsById('goButton');

v_obj.setAttribute('style','color:red;background:none');

else name varsa o zaman u gibi öğe üzerinde kontrol alabilirsiniz,

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsByName('goButton');

v_obj.setAttribute('style','color:red;background:none');

Daha [name=elementName]{}önce etiket olmadan kullanmak da işe yarayacaktır. Bu ada sahip tüm öğeleri etkileyecektir.

Örneğin:

[name=test] {
  width: 100px;
}

<input type=text name=test>
<div name=test></div>

Bu, sorgu seçici için mükemmel bir iştir ...

var Set1=document.querySelectorAll('input[type=button]');  // by type

var Set2=document.querySelectorAll('input[name=goButton]'); // by name

var Set3=document.querySelectorAll('input[value=Go]'); // by value

Daha sonra bulunan öğeler üzerinde çalışmak için bu koleksiyonlar arasında geçiş yapabilirsiniz.

girişte adı değil, başka bir öğeyi kullanmıyorsanız, orada özniteliğe sahip başka bir öğeyi hedefleyebilirsiniz.

    [title~=flower] {
      border: 5px solid yellow;
    }

    <img src="klematis.jpg" title="klematis flower" width="150" height="113">
    <img src="img_flwr.gif" title="flower" width="224" height="162">
    <img src="img_flwr.gif" title="flowers" width="224" height="162">

umarım yardım eder. teşekkür ederim

jQuery kullanma olasılığını araştırdınız mı? Çok geniş bir seçici model (CSS sözdiziminde olduğu gibi) vardır ve öğelerinizde kimlik olmasa bile, üst -> çocuk -> torun ilişkisini kullanarak bunları seçebilmeniz gerekir. Bunları seçtikten sonra, öğelere CSS stilini uygulamanızı sağlayan çok basit bir yöntem çağrısı (tam adı unuttum) var.

Kullanımı basit olmalı ve bir bonus olarak, büyük olasılıkla platformlar arası uyumlu olacaksınız.