【问题标题】:How to select label for="XYZ" in CSS?如何在 CSS 中为“XYZ”选择标签?
【发布时间】:2011-02-05 16:15:06
【问题描述】:

HTML:

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

CSS:

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

我希望根据'for' 属性选择标签来进行布局更改。

【问题讨论】:

    标签: css css-selectors


    【解决方案1】:

    如果label 立即 跟随指定的input 元素:

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

    【讨论】:

      【解决方案2】:

      如果内容是变量,则需要用引号将其连接起来。它对我有用。像这样:

      itemSelected(id: number){ console.log('标签包含', document.querySelector("label[for='" + id + "']")); }

      【讨论】:

        【解决方案3】:

        选择器将是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]");
        

        这是一个attribute selector。请注意,某些浏览器(例如 IE

        (我假设模板{t _your_email} 将使用id="email" 填充字段。如果不是,请改用类。)

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

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

        他们can be single or double quotes

        【讨论】:

        • 然后我将使用conditiona cmets将其更改为ie7的类,感谢您的出色回答!
        • 现在 jQuery 文档说你不需要单个单词的引号,所以它再次匹配 CSS(在这方面)。
        • 为了避免大家混淆(我自己也有这个),label[for=email]之间不能有空格
        • @T.J.Crowder 我明白了。我只是在测试时澄清了这一点。
        • 现代 JavaScript 更新:document.querySelector('label[for="email"]')document.querySelectorAll('label[for="email"]')
        猜你喜欢
        • 1970-01-01
        • 2015-10-20
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-05-15
        • 2021-12-16
        相关资源
        最近更新 更多