要素名にCSSスタイルを適用できますか？

私は現在、CSSスタイルを適用するHTMLを制御できないプロジェクトに取り組んでいます。そして、要素を区別するのに十分なidとクラスの宣言がないという意味で、HTMLは十分にラベル付けされていません。

だから、私はidまたはclass属性を持たないオブジェクトにスタイルを適用する方法を探しています。

フォーム項目に「名前」または「値」属性がある場合があります。

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

name = "goButton"に基づいてスタイルを適用する方法はありますか？「価値」についてはどうですか？

Googleの検索では、「名前」や「値」などの一般的な用語がウェブページに表示されるあらゆる種類のインスタンスを見つけるため、これを見つけるのは難しい種類のことです。

私は答えがノーだと疑っています...しかし、おそらく誰かが巧妙なハックをしていますか？

どんなアドバイスもいただければ幸いです。

属性セレクターを使用できます

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

<input name="goButton">

IE6ではサポートされていないことに注意してください。

更新：IE6は廃止されているので、2016年には、ほとんど自由に使用できます。http://quirksmode.org/css/selectors/

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

テキスト入力の例

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

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

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

属性セレクターを使用することはできますが、Mederが言ったようにIE6では機能しません。そのためにはJavaScriptの回避策があります。Selectivizrを確認する

属性セレクターの詳細：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 }

将来のグーグルの場合、@ mederによる回答のメソッドであるFYIは、name属性を持つ任意の要素で使用できます。したがって<iframe>、名前のあるxyzがあるとすると、ルールを以下のように使用できます。

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

このname属性は、次の要素で使用できます。

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

私があなたの質問をすぐに理解できれば、

はい、IDまたは名前が使用可能な場合は、個々の要素のスタイルを設定できます。

例えば

idが利用可能な場合、uは次のような要素を制御できます。

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

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

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

そうでなければ、名前が利用可能な場合、uは次のような要素を制御できます。

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

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

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

[name=elementName]{}以前にタグなしで使用することもできます。この名前のすべての要素に影響します。

例えば：

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

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

これはクエリセレクターに最適なジョブです...

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

次に、これらのコレクションをループして、見つかった要素を操作できます。

入力で名前を使用していないが他の要素を使用している場合は、そこの属性で他の要素をターゲットにできます。

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

その助けを願っています。ありがとうございました

jQueryを使用する可能性を探りましたか？これには非常にリーチセレクターモデルがあり（CSSと構文が似ています）、要素にIDがない場合でも、親->子->孫関係を使用してそれらを選択できるはずです。それらを選択したら、CSSスタイルを要素に適用できる非常に単純なメソッド呼び出し（正確な名前を忘れた）があります。

使い方は簡単で、おまけとして、クロスプラットフォームの互換性が非常に高いでしょう。