代码之家 › 专栏 › 技术社区 › TPop

标签的CSS通配符

wildcard css

TPop · 技术社区 · 7 年前

我在我的WP网站上使用免费的NinjaForms插件。免费版本不提供格式化功能,所以我通过CSS来实现。默认情况下,标签是粗体的,我希望它们更轻一些。下面是我今天使用的CSS。

#nf-field-1-wrap label, #nf-field-2-wrap label, #nf-field-3-wrap label, #nf-field-4-wrap label, #nf-field-5-wrap label, #nf-field-6-wrap label, {
    font-weight: 300;
}

它起作用了。。。但是,不允许在不更新CSS的情况下添加将来的表单。

我希望能够在CSS样式中使用通配符,以便所有未来的字段自动获得较轻的字体样式。

我试过了,但没用。

label[id="nf-field- "] {
    font-weight: 300;
}

我还查看了论坛,找到了一篇文章,其中提到了标签的通配符,并应用了这种格式,但它也不起作用。

label[id$="nf-field- "] {
    font-weight: 300;
}

表单的url: https://www.makingwavesweb.com/project-application/

1字段的HTML示例:*更新的HTML代码

<div id="nf-field-24-wrap" class="field-wrap textbox-wrap nf-fail nf-error" data-field-id="24">

    <div class="nf-field-label">
        <label for="nf-field-24" class="">Company Name <span class="ninja-forms-req-symbol">*</span> </label>
    </div>

    <div class="nf-field-element">
        <input value="" class="ninja-forms-field nf-element" id="nf-field-24" name="nf-field-24" aria-invalid="true" aria-describedby="nf-error-24" type="text">
    </div>


</div>

1 回复 | 直到 7 年前

TylerH Ash Burlaczenko 7 年前

要选择的通配符 id 以某个字符串开头的是 ^ 。

因此,对于这一部分,您将使用 [id^="nf-field-"] 。如果要设置样式的标签元素为后代对于具有该ID的元素,可以通过以下方式选择它们:

[id^="nf-field-"] label { /* styles here */ }

您的尝试 label[id$="nf-field-"] 将选择 <label> 具有ID的元素 他们自己 那个结束在“nf-field-”中,但您有ID为“nf-field”的元素,并且要设置样式的标签是它们的后代。此外,标签是具有上述“nf-field”id的元素的后代。这两个原因就是您的尝试失败的原因。

有关属性选择器的完整列表,请参见 MDN 。