如何在 ZK 中应用 css 选择器

Question

以下是我在 index.zul 中的部分编码：

<grid>
    <columns>
        <column/>
        <column/>
    </columns>
    <rows>
        <row>
            <label value="${labels.personal.name}"/>
            <label value="@load(vm.personal.name)"/>
        </row>
        <row>
            <label value="${labels.personal.id}"/>
            <label value="@load(vm.personal.id)"/>
        </row>
    <rows>
<grid>

我尝试使用下面的 CSS，但不知何故，行元素中的每个标签都加粗了。

.z-label:FIRST-CHILD{
    font-weight: bold;
}

那么，如何才能将 font-weight 仅应用于每个行元素的第一个标签？

Answer 1

您可以使用 sclass 属性，以便您的 css 应用默认值 css。

<style>
    .bold{
        font-weight: bold;
    }
</style>
<grid>
    <columns>
         <column/>
         <column/>
    </columns>
    <rows>
        <row>
            <label value="${labels.personal.name}" sclass="bold"/>
            <label value="@load(vm.personal.name)"/>
        </row>
        <row>
            <label value="${labels.personal.id}" sclass="bold"/>
            <label value="@load(vm.personal.id)"/>
        </row>
    </rows>
</grid>

您可以在this fiddle.

中测试

更新：

我在 DOM 中环顾四周，并进一步使用 css 选择器，所以我来到了 this solution

.z-row-inner:first-child .z-label {
    font-weight:bold;
}

如何在 ZK 中应用 css 选择器

How to apply css selector in ZK

css

zk

更新：