如何为=“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... */
}

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

...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屋！