css属性选择器妙用

背景

最近做一个表单的需求，我惊奇的发现UI给的图label是靠左对齐的，而正常的表单label应该是靠右对齐的，因此沟通无果后，我只能来实现这个看似奇怪的布局

问题分析

此处以Element的Form为例，来解决这个布局问题

常规表单布局

修改后的布局

实现方案

先使用了Element自带api：label-position，发现【即时配送】靠左是有了，但是并没有对齐，我有些懵x了，这api没那么完善呀。算了先实现咱的需求。

1. 找到必填和非必填的class区别

2. 修改is-required样式 通过 css属性选择器(~) 来选中包含is-required的元素，作样式调整

总结

很多看起来奇怪的布局样式其实都可以使用基本的css来实现，前端三大件真的很重要，还是不能局限在业务里面，巩固基础是很必要的，共勉。