css中的嵌套资源与：之后和之前

本文介绍了css中的嵌套资源与：之后和之前的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我需要区分完成/开始日期。所以我想在 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 应该是 ＃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:afterShould be#mzti-finish-date.datepicker:afterBut really should be (because IDs are unique)#mzti-finish-date:after 这篇关于css中的嵌套资源与：之后和之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！