css - 如何在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;
}