css中的嵌套资源与：之后和之前 [英] Nested resources in css with :after and :before

问题描述

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

 < input id =mzti-start-datetype =textname =start_dateclass =datepicker mzti-dp-width mzti-field-heightplaceholder =开始日期 > 
< input id =mzti-finish-datetype =textname =finish_dateclass =datepicker mzti-dp-width mzti-field-heightplaceholder =End date> 
  

这里是我的CSS文件：

 
＃mzti-finish-date.datepicker：before {
 content：''; 
显示：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; 
顶部：-7px; 
左：190px; //我在这里修改了
} 
 
＃mzti-finish-date .datepicker：after {
 content：''; 
显示：inline-block; 
 border-left：6px solid transparent; 
 border-right：6px solid transparent; 
 border-bottom：6px solid #ffffff; 
 position：absolute; 
顶部：-6px; 
左：191px; //我在这里做了一个改变
} 
 

不幸的是，我无法弄清楚为什么 mzti-finish-date 不适用于完成日期框。

解决方案

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

 ＃mzti-finish date .datepicker：after 
  

应该是

< pre class =lang-css prettyprint-override> ＃mzti-finish-date.datepicker：after


但真的应该是（因为ID是唯一的）

  #mzti -finish-date：after 
  

I need to differentiate on between finish / start date. So I would like on datepicker CSS rules applied to one text-field and others to the other.

<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">

And here were my CSS files:

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

Unfortunately I was not able to figure out why the rules under mzti-finish-date do not apply to the finish-date box.

解决方案

There's a space in your second selector.

#mzti-finish-date .datepicker:after

Should be

#mzti-finish-date.datepicker:after

But really should be (because IDs are unique)

#mzti-finish-date:after

这篇关于css中的嵌套资源与：之后和之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！