Posso applicare uno stile CSS al nome di un elemento?

Attualmente sto lavorando a un progetto in cui non ho alcun controllo sull'HTML a cui sto applicando gli stili CSS. E l'HTML non è molto ben etichettato, nel senso che non ci sono abbastanza dichiarazioni id e class per distinguere tra elementi.

Quindi, sto cercando dei modi in cui posso applicare gli stili agli oggetti che non hanno un attributo id o class.

A volte, gli elementi del modulo hanno un attributo "nome" o "valore":

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

C'è un modo per applicare uno stile basato su name = "goButton"? Che dire di "valore"?

È il genere di cose che è difficile da scoprire perché una ricerca su Google troverà tutti i tipi di casi in cui termini generici come "nome" e "valore" appariranno nelle pagine web.

Sospetto che la risposta sia no ... ma forse qualcuno ha un trucco intelligente?

Qualsiasi consiglio sarebbe molto apprezzato.

Puoi usare il selettore di attributi,

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

<input name="goButton">

Ricorda che non è supportato in IE6.

Aggiornamento: nel 2016 puoi praticamente usarli come vuoi, poiché IE6 è morto. http://quirksmode.org/css/selectors/

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

Esempio di inserimento di testo

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

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

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

Puoi usare i selettori di attributo ma non funzioneranno in IE6 come diceva meder, ci sono soluzioni alternative javascript per quello. Controlla Selectivizr

Più dettagliatamente sui selettori di attributi: 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 }

Per i futuri googler, FYI, il metodo nella risposta di @meder, può essere utilizzato con qualsiasi elemento che ha un attributo name, quindi diciamo che c'è un <iframe>con il nome, xyzquindi puoi usare la regola come belows.

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

L' nameattributo può essere utilizzato sui seguenti elementi:

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

Se capisco la tua domanda in quel momento,

Sì, puoi impostare lo stile del singolo elemento se il suo ID o nome è disponibile,

per esempio

se id disponibile, puoi ottenere il controllo dell'elemento come,

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

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

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

altrimenti se il nome è disponibile, puoi ottenere il controllo dell'elemento come,

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

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

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

Anche l'utilizzo [name=elementName]{}senza tag prima funzionerà. Interesserà tutti gli elementi con questo nome.

Per esempio:

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

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

Questo è il lavoro perfetto per il selettore di query ...

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

È quindi possibile scorrere in sequenza queste raccolte per operare sugli elementi trovati.

se nel caso in cui non si utilizzi il nome nell'input ma un altro elemento, è possibile scegliere come target un altro elemento con l'attributo there.

    [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">

spero che sia di aiuto. Grazie

hai esplorato la possibilità di utilizzare jQuery? Ha un modello di selezione molto esteso (simile nella sintassi al CSS) e anche se i tuoi elementi non hanno ID, dovresti essere in grado di selezionarli usando la relazione parent -> child -> grandchild. Una volta che li hai selezionati, c'è una semplice chiamata di metodo (ho dimenticato il nome esatto) che ti consente di applicare lo stile CSS agli elementi.

Dovrebbe essere semplice da usare e come bonus, molto probabilmente sarai molto compatibile con più piattaforme.