CSS id^=选择器问题[重复]

Question

我有一个重复的组，其中包含一个日期字段，作为在日历中选择日期的按钮。

<button id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_1_cal_cal_img" class="btn calendarbutton" type="button">

选择器是

id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_0_cal_cal_img"
id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_1_cal_cal_img"
id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_2_cal_cal_img"

我已禁用我的日期字段，因为该值是以另一种形式生成的。

我现在不想显示那些重复的日期按钮。

我尝试了类似的方法，但它不起作用：

[id^=form_59_].fabrikForm [id^="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_"]"_cal_cal_img" { display:none; }

非常感谢您的帮助和提示。

Answer 1

不，没有这样的 wildcard 选择器可以帮助您匹配属性选择器中间的任何单个字符。相反，您可以尝试以下方法之一。它们不是 100% 正确，但可以让你接近你需要的东西（并且是你使用纯 CSS 所能达到的最接近的）。

---

演示中的第一个选择器：（开头和结尾的组合）

当元素的id 正好以文本开头 gprh_fabrik_user_registration_333_repeat___premier_rappel_co_ 时，下面演示中的第一个选择器将匹配也以准确的文本结尾 _cal_cal_img。

此选择器的一个可能缺点（根据具体需要，这也将选择具有以下内容的元素 id 因为它们也以匹配值开始和结束：

id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_10_cal_cal_img"id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_100_cal_cal_img"id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_10_a_cal_cal_img"

---

演示中的第二个选择器：（仅使用开头，忽略结尾）

演示中的第二个选择器将选择任何元素 id 完全以文本开头gprh_fabrik_user_registration_333_repeat___premier_rappel_co_。这不关心 id 的结尾部分是什么。

这个的缺点是，它也会匹配具有如下 id 的元素：

id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co"id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_1"id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_2_cal_cal_imgs"

---

具有上述两个选项的演示：

[id^="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_"][id$="_cal_cal_img"] {
  background: red;
}

/* use the above one or the below depending on your need */

[id^="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_"] {
  border: 2px solid green;
}

<input id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_0_cal_cal_img" />
<input id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_1_cal_cal_img" />
<input id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_2_cal_cal_img" />
<input id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_2" />
<input id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_2_cal_img" />
<input id="gprh_fabrik_user_registration_333_repeat___premier_rappel_co_2_cal_cal_imgs" />