Kann ich einen CSS-Stil auf einen Elementnamen anwenden?

Ich arbeite derzeit an einem Projekt, bei dem ich keine Kontrolle über den HTML-Code habe, auf den ich CSS-Stile anwende. Und der HTML-Code ist nicht sehr gut beschriftet, da nicht genügend ID- und Klassendeklarationen vorhanden sind, um zwischen Elementen zu unterscheiden.

Daher suche ich nach Möglichkeiten, wie ich Stile auf Objekte anwenden kann, die keine ID oder kein Klassenattribut haben.

Manchmal haben Formularelemente das Attribut "Name" oder "Wert":

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

Gibt es eine Möglichkeit, einen Stil basierend auf name = "goButton" anzuwenden? Was ist mit "Wert"?

Diese Art von Dingen ist schwer herauszufinden, da eine Google-Suche alle möglichen Fälle findet, in denen allgemeine Begriffe wie "Name" und "Wert" auf Webseiten erscheinen.

Ich vermute, dass die Antwort nein ist ... aber vielleicht hat jemand einen klugen Hack?

Jeder Rat wäre sehr dankbar.

Sie können die Attributauswahl verwenden.

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

<input name="goButton">

Beachten Sie, dass es in IE6 nicht unterstützt wird.

Update: 2016 können Sie sie so ziemlich verwenden, wie Sie möchten, da IE6 tot ist. http://quirksmode.org/css/selectors/

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

Beispiel für eine Texteingabe

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

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

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

Sie können Attributselektoren verwenden, aber diese funktionieren in IE6 nicht, wie Meder sagte. Es gibt Javascript-Problemumgehungen dafür. Überprüfen Sie Selectivizr

Weitere Informationen zu Attributselektoren: 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 }

Für zukünftige Googler kann FYI, die Methode in der Antwort von @meder, mit jedem Element verwendet werden, das ein Namensattribut hat. Nehmen wir also an, es gibt ein Element <iframe>mit dem Namen, xyzdann können Sie die Regel als unten verwenden.

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

Das nameAttribut kann für die folgenden Elemente verwendet werden:

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

Wenn ich Ihre Frage richtig verstehe, dann

Ja, Sie können den Stil eines einzelnen Elements festlegen, wenn dessen ID oder Name verfügbar ist.

z.B

Wenn die ID verfügbar ist, können Sie die Kontrolle über das Element erhalten, z.

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

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

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

Andernfalls, wenn der Name verfügbar ist, können Sie die Kontrolle über das Element erhalten, z.

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

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

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

Die Verwendung [name=elementName]{}ohne Tag zuvor funktioniert auch. Es wirkt sich auf alle Elemente mit diesem Namen aus.

Beispielsweise:

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

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

Dies ist der perfekte Job für den Abfrageselektor ...

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

Sie können diese Sammlungen dann durchlaufen, um die gefundenen Elemente zu bearbeiten.

Wenn Sie in der Eingabe keinen Namen, sondern ein anderes Element verwenden, können Sie ein anderes Element mit diesem Attribut als Ziel festlegen.

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

hoffe seine Hilfe. Danke dir

Haben Sie die Möglichkeit der Verwendung von jQuery untersucht? Es hat ein sehr reichhaltiges Auswahlmodell (ähnlich in der Syntax wie CSS) und selbst wenn Ihre Elemente keine IDs haben, sollten Sie sie über die Beziehung Eltern -> Kind -> Enkel auswählen können. Sobald Sie sie ausgewählt haben, gibt es einen sehr einfachen Methodenaufruf (ich vergesse den genauen Namen), mit dem Sie den CSS-Stil auf die Elemente anwenden können.

Es sollte einfach zu bedienen sein und als Bonus sind Sie höchstwahrscheinlich sehr plattformübergreifend kompatibel.