提问者:小点点

css中的嵌套资源:之后和:之前


我需要区分完成/开始日期。所以我想在datepicker上CSS规则应用于一个文本字段,其他应用于另一个文本字段。

<input id="mzti-start-date"  type="text" name="start_date" class="datepicker mzti-dp-width mzti-field-height" placeholder="Start date">
<input id="mzti-finish-date" type="text" name="finish_date" class="datepicker mzti-dp-width mzti-field-height" placeholder="End date">

这是我的CSS文件:

#mzti-finish-date.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 190px;  // I made a change here 
}

#mzti-finish-date .datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 191px;  // I made a change here 
}

不幸的是,我无法弄清楚为什么mzti-find-date下的规则不适用于find-date框。


共1个答案

匿名用户

您的第二个选择器中有一个空格。

#mzti-finish-date .datepicker:after

应该是的

#mzti-finish-date.datepicker:after

但真的应该是(因为ID是唯一的)

#mzti-finish-date:after