css子类选择器的应用场景实战

一、前言

最近需要在弹窗中增加一个可折叠的备注栏，刚好Ant Design提供了Collapse折叠面板供我们使用，但放入后发现排版未对齐，如下图所示：

经过尝试后使用css子类选择器及设置样式优先级的方式解决了这个问题，解决后效果如下：

下面分享一下自己的解决过程和方案。

二、解决过程和方案

首先，分析界面元素发现将ant-collapse-header类中的padding属性导致了排版未对其：

去除该属性后就能够达到排版对齐的效果：

但该组件无法直接对齐设置样式，只能在ant-collapse-item所在层设置样式：

这里小伙伴们想到的方法可能是重写一个padding属性为0px 0px的ant-collapse-header样式类覆盖原来的就能达到此效果。但这样容易影响到其他需要padding属性的collapse组件。

因此，我们需要创建一个类加到其父级组件中，并通过子类选择的方式来覆盖其属性：

.remark {
}
.remark>.ant-collapse-header {
  padding-left: 0px !important; //important会提供该样式优先级
}

将上面的remark加入到Panel组件上即可：

成功解决了该问题，解决后效果如下：

查看备注与上面所属模块栏间距有些大，在稍微调整一下remark样式即可：

.remark {
  padding-bottom: 0px;
  margin-top: -20px;
}

三、总结

子元素选择器通过>关键标识使用，可以对元素的子元素进行样式属性的调整。它与后代选择器有点相似，但子元素选择器只能选择作为某元素子元素的元素，而后代选择器可以对子子代，子子子代等都会生效（因为都是后代）。