CSS 标签通配符

Question

我在我的 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;
}

我还查看了论坛，发现 post 解决了标签的通配符问题并应用了格式，但它也不起作用。

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

url 形式：https://www.makingwavesweb.com/project-application/

HTML 1 个字段的示例：*更新 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>

Answer 1

以特定字符串开头的 select id 的通配符是 ^.

因此对于该部分，您将使用 [id^="nf-field-"]。如果您要设置样式的标签元素是具有该 ID 的元素的后代，您可以这样 select 它们：

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

您对 label[id$="nf-field-"] 的尝试将 select <label> 个具有 ID 自身且结束 [=28] 的元素=] 在 "nf-field-" 中，但是您有具有 "nf-field" ID 的元素，并且您想要设置样式的标签是它们的后代。此外，您的标签是具有上述 "nf-field" ID 的元素的后代。这两个原因是您的尝试失败的原因。

请参阅 select 或 MDN 的完整属性列表。

CSS 标签通配符

CSS Wildcard for Label

css

wildcard