标签的CSS通配符

我在我的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:

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>

公司名称*

选择以特定字符串开头的

id

s的通配符是

^

因此，对于该部分，您将使用

[id^=“nf field-”]

。如果要设置样式的标签元素是具有该ID的元素的后代，则可以通过以下方式选择它们：

[id^=“nf field-”]标签{/*此处的样式*/}

您尝试使用

标签[id$=“nf-field-”]

将选择id本身以“nf-field-”结尾的

元素，但您有id为“nf-field”的元素，并且要设置样式的标签是这些元素的后代。此外，标签是具有上述“nf字段”ID的元素的后代。这两个原因就是您的尝试失败的原因

---

查看属性选择器的完整列表。

请尝试

label[id^=“nf field-”]

使用类？然后使用

.label class{/*css*/}

@BalázsVarga如果您有答案，请将其作为答案发布，而不是评论。@BalázsVarga不起作用。@TPop请包含您试图应用css的HTML。谢谢，但它仍然不起作用。出于某些我不理解的原因，我必须以id“nf-field-1-wrap”为目标，因为id“nf-field-1”不起作用。因此，使用您建议的格式，我尝试了[id^=“nf field--wrap”]标签，但不幸的是仍然不起作用。我还更新了问题中的html，以反映nf-field-1-wrap标记的作用。@TPop看到这个JSFiddle：您可以添加一些额外的html吗（正如您所说，您有多个带有标签的div，对吗？）为了说明它是如何不适合您的？NinjaForms让我向容器或元素添加一个类。当我步履蹒跚时，我尝试了这段代码，它成功了：.nf字段标签{font-weight:300！重要；}我并不热衷于使用！很重要，但有时也没关系。对吧？@TPop有时！这一点很重要，特别是当您要处理环境中的多个抽象层时。只要你少用，就不会有问题。