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仅应用于每个行元素的第一个label标签？

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选择器

1 个答案:

更新