css中的嵌套資源：after和：

我需要區分完成/開始日期。所以我想在datepicker CSS規則適用於一個文本字段，其他人適用於另一個。css中的嵌套資源：after和：

<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-finish-date下的規則並不適用於精日期框。

來源

2013-08-19 Jackie Chan

您對'＃mzti精加工最新.datepicker一個額外的空間：之後''.datepicker'之前。 – haim770

@Jackie Chan，你能解決你的問題嗎？ –

第二個選擇器中有一個空格。

#mzti-finish-date .datepicker:after

應該

#mzti-finish-date.datepicker:after

但實際上應該是（因爲ID是唯一的）

#mzti-finish-date:after

來源

2013-08-19 06:35:46 FakeRainBrigand

嗯...這些實際上都沒有幫助... –

它不會工作，因爲日期選擇器被添加到文檔的底部，因此嵌套不起作用:( –

我不知道你的意思。元素的順序完全無關。 – FakeRainBrigand

css中的嵌套資源：after和：

回答

相關問題