如何为"XYZ"选择标签?在CSS中? [英] How to select label for="XYZ" in CSS?

问题描述

HTML:

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

CSS:

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

我希望基于'for'属性选择标签以进行布局更改.

I wish to select the label based on the 'for' attribute to make layout changes.

推荐答案

选择器为label[for=email]，因此在CSS中:

The selector would be label[for=email], so in CSS:

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

...或在使用DOM的JavaScript中:

...or in JavaScript using the DOM:

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

...或在JavaScript中使用jQuery:

...or in JavaScript using jQuery:

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

这是属性选择器.请注意，某些浏览器(例如IE< 8的版本)可能不支持属性选择器，但较新的浏览器则支持.可悲的是，要支持IE6和IE7等较旧的浏览器，您必须使用一个类(很好，或采用其他结构方式).

It's an attribute selector. Note that some browsers (versions of IE < 8, for instance) may not support attribute selectors, but more recent ones do. To support older browsers like IE6 and IE7, you'd have to use a class (well, or some other structural way), sadly.

(我假设模板{t _your_email}将用id="email"填充字段.否则，请使用类.)

(I'm assuming that the template {t _your_email} will fill in a field with id="email". If not, use a class instead.)

请注意，如果您选择的属性的值不符合 CSS标识符(例如，如果其中包含空格或方括号，或者以数字开头，等等)，则需要在值周围加上引号:

Note that if the value of the attribute you're selecting doesn't fit the rules for a CSS identifier (for instance, if it has spaces or brackets in it, or starts with a digit, etc.), you need quotes around the value:

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

可以是单引号或双引号.

这篇关于如何为"XYZ"选择标签?在CSS中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！