Question

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

width: 50px; margin-right: calc(100% - 50px)

它有效......但是，不允许在不更新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;
}

我还检查了论坛，发现了一个帖子，用于解决标签的通配符并应用了格式，但它也不起作用。

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

表单的网址：https://www.makingwavesweb.com/project-application/

1个字段的HTML示例：*更新的html代码

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

Answer 1

选择以id开头的^的通配符为[id^="nf-field-"]。

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

label[id$="nf-field-"]

您<label>的尝试会在“nf-field-”中选择的AllowAmbiguousTypes元素，但是您具有带“nf-field”ID的元素，并且要设置样式的标签是它们的后代。此外，您的标签是具有上述“nf-field”ID的元素的后代。这两个原因是你的尝试不起作用的原因。

请参阅MDN的完整属性选择器列表。

用于标签的CSS通配符

1 个答案: