CSS id ^ = selector问题

时间:2017-03-04 17:52:01

标签: css css3 css-selectors

我有一个带有日期字段的重复组,作为在日历中选择日期的按钮。

<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; }

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

1 个答案:

答案 0 :(得分:2)

不,没有这样的通配符选择器可以帮助您匹配属性选择器中间的任何单个字符。相反,你可以尝试下面的一个。它们不是100%正确,但可以让你接近你需要的(并且是最接近纯CSS的)。

演示中的第一个选择器:(以及结尾的组合开始)

以下演示中的第一个选择器将匹配元素 id恰好以文字开头 gprh_fabrik_user_registration_333_repeat___premier_rappel_co_ < em>并且它也以 _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 启动时的任何元素 < / strong> 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"

使用上述两个选项进行演示:

&#13;
&#13;
[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;
}
&#13;
<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" />
&#13;
&#13;
&#13;