如何在CSS中为="XYZ"选择标签？

Question

HTML:

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

CSS:

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

我想为电子邮件标签制作一个新的CSS,因为它并不意味着那么广泛.

Answer 1

选择器将是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... */
}