如何在 CSS 中选择 = “ XYZ”的标签？

label {
display: block;
width: 156px;
cursor: pointer;
padding-right: 6px;
padding-bottom: 1px;
}
<label for="email">{t _your_email}:</label>

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

373943 次浏览
小开
最佳答案

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

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

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

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

.．.或者在JavaScript中使用jQuery:

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 + "']"));
}
小开

如果label 立即后跟一个指定的input元素:

input#example + label { ... }
input:checked + label { ... }

提交答案