Czy mogę zastosować styl CSS do nazwy elementu?

Obecnie pracuję nad projektem, w którym nie mam kontroli nad kodem HTML, do którego stosuję style CSS. A kod HTML nie jest dobrze oznaczony, w tym sensie, że nie ma wystarczającej liczby deklaracji identyfikatorów i klas, aby rozróżniać elementy.

Dlatego szukam sposobów na zastosowanie stylów do obiektów, które nie mają atrybutu id ani class.

Czasami elementy formularza mają atrybut „nazwa” lub „wartość”:

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

Czy istnieje sposób, w jaki mogę zastosować styl oparty na name = "goButton"? A co z „wartością”?

Trudno jest się tego dowiedzieć, ponieważ wyszukiwarka Google znajduje różne rodzaje przypadków, w których na stronach internetowych pojawiają się ogólne terminy, takie jak „nazwa” i „wartość”.

Podejrzewam, że odpowiedź brzmi nie ... ale może ktoś sprytnie włamał się?

Każda rada byłaby bardzo mile widziana.

Możesz użyć selektora atrybutu,

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

<input name="goButton">

Należy pamiętać, że nie jest to obsługiwane w IE6.

Aktualizacja: w 2016 roku możesz ich używać tak, jak chcesz, ponieważ IE6 jest martwy. http://quirksmode.org/css/selectors/

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

Przykład wprowadzania tekstu

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

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

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

Możesz używać selektorów atrybutów, ale nie będą one działać w IE6, tak jak powiedział meder, istnieją obejścia javascript. Sprawdź Selectivizr

Bardziej szczegółowe informacje na temat selektorów atrybutów: 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 }

W przypadku przyszłych pracowników Google FYI, metoda zawarta w odpowiedzi @meder, może być używana z dowolnym elementem, który ma atrybut name, więc powiedzmy, że istnieje <iframe>z nazwą, xyza następnie możesz użyć reguły jako poniżej.

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

nameAtrybut może być stosowany na następujących elementach:

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

Jeśli dobrze zrozumiem twoje pytanie,

Tak, możesz ustawić styl pojedynczego elementu, jeśli jego identyfikator lub nazwa są dostępne,

na przykład

jeśli identyfikator jest dostępny, możesz uzyskać kontrolę nad elementem, takim jak,

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

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

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

w przeciwnym razie, jeśli nazwa jest dostępna, możesz uzyskać kontrolę nad elementem, takim jak,

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

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

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

Używanie wcześniej [name=elementName]{}bez tagu też będzie działać. Wpłynie to na wszystkie elementy o tej nazwie.

Na przykład:

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

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

To idealna praca dla selektora zapytań ...

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

Następnie możesz przejrzeć te kolekcje w pętli, aby operować na znalezionych elementach.

jeśli w przypadku, gdy nie używasz nazwy w danych wejściowych, ale innego elementu, możesz wskazać inny element z atrybutem tam.

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

mam nadzieję, że pomoże. Dziękuję Ci

czy zbadałeś możliwość korzystania z jQuery? Ma bardzo model selektora zasięgu (podobny w składni do CSS) i nawet jeśli twoje elementy nie mają identyfikatorów, powinieneś być w stanie je wybrać za pomocą relacji rodzic -> dziecko -> wnuk. Po ich wybraniu jest bardzo proste wywołanie metody (nie pamiętam dokładnej nazwy), która pozwala na zastosowanie stylu CSS do elementu (elementów).

Powinien być prosty w użyciu, a jako bonus najprawdopodobniej będziesz bardzo kompatybilny z różnymi platformami.