加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
MooKwai块样式自定义子元素

自定义子元素

MooKwai 的每个组件提供了基础元素的样式配置,你还可以通过“添加子元素”功能实现更丰富的样式配置选项,可以是该元素的子元素、伪类以及交互状态等。

文章目录

添加子元素

在元素的样式设置下方,点击 “添加子元素” 后输入名称即可添加子元素。子元素可以是该元素下的任何子元素选择器或伪类等。

编辑子元素

点击已添加的子元素可打开子元素编辑面板,子元素的编辑方式与元素的编辑方式一致。

删除子元素

在子元素编辑面板下方点击删除子元素按钮即可删除该子元素。

命名规则

子元素的命名规格同 CSS 选择器命名规则一致,您只需填写当前元素子元素的名称即可,MooKwai 会自动给子元素前添加当前元素的前缀。

// 使用类名
.child-div
// 结果 .mkb-block.child-div

// 使用类名(前空格)
 .child-div
// 结果 .mkb-block .child-div

// 使用元素 ID 名称
#ele-id
// 结果 .mkb-block#ele-id

// 使用元素 ID 名称(前空格)
 #ele-id
// 结果 .mkb-block #ele-id

// 使用容器名称(前面需添加空格)
 div
// 结果 .mkb-block div

// 使用最近一级子元素
>span
// 结果 .mkb-block>span

// 使用多个子元素
>ul,>ol
// 结果 .mkb-block>ul,.mkb-block>ol

// 使用伪类
:hover
// 结果 .mkb-block:hover

// 使用伪元素
::before
// 结果 .mkb-block::before

// 使用范围
:not(.active),:where(.disabled)
// 结果 .mkb-block:not(.active),.mkb-block:where(.disabled)

// 使用 html 属性
[attribute=value]
// 结果 .mkb-block[attribute=value]

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧