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

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

一、前言

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


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


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


二、解决过程和方案

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


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


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


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

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

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

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


成功解决了该问题,解决后效果如下:



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

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

三、总结

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

目录
相关文章
|
7天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
15 7
|
1月前
|
前端开发 算法
CSS 选择器的优先级算法
在CSS中,选择器的优先级由四个级别和各级别的出现次数决定**。这四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符,优先级依次降低。
|
1月前
|
前端开发
CSS语言的选择器
CSS语言的选择器
|
1月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
16 1
N..
|
18天前
|
前端开发 UED
CSS选择器
CSS选择器
N..
7 0
|
26天前
|
前端开发
css选择器
css选择器【2月更文挑战第26天】
25 12
|
29天前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
18 1
|
30天前
|
前端开发 开发者
掌握CSS中的常见选择器
掌握CSS中的常见选择器
27 0
|
30天前
|
前端开发
CSS选择器十二种方法
CSS选择器十二种方法
|
1月前
|
前端开发
css选择器的那些类型
css选择器的那些类型