CSSで「= XYZ」のラベルを選択する方法は？

HTML：

<label for="email">{t _your_email}:</label>

CSS：

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

'for'属性に基づいてラベルを選択して、レイアウトを変更したいと思います。

セレクターはlabel[for=email]なので、CSSでは次のようになります。

label[for=email]
{
    /* ...definitions here... */
}

...またはDOMを使用するJavaScriptで：

var element = document.querySelector("label[for=email]");

...またはjQueryを使用するJavaScriptで：

var element = $("label[for=email]");

これは属性セレクターです。一部のブラウザー（IE <8のバージョンなど）は属性セレクターをサポートしていない場合がありますが、最近のものはサポートしています。IE6やIE7のような古いブラウザーをサポートするには、残念ながらクラス（まあ、または他の構造的な方法）を使用する必要があります。

（テンプレート{t _your_email}ではフィールドがで埋められると想定していid="email"ます。そうでない場合は、代わりにクラスを使用してください。）

選択している属性の値がCSS識別子のルールに適合しない場合（たとえば、スペースや角かっこが含まれている場合、または数字で始まる場合など）は、値：

label[for="field[]"]
{
    /* ...definitions here... */
}

彼らは、単一または二重引用符可能。

コンテンツが変数の場合は、引用符で連結する必要があります。それは私のために働いた。このような：

itemSelected（id：number）{
    console.log（ 'label contains'、document.querySelector（ "label [for = '" + id + "']"））;
}