html - 使用带有 jsf 重复标记的第 n 个子 css 选择器

Question

我试图让我的 html 页面与 JSF 一起工作，并且偶然发现了一个问题，即如何让 nth-child css 选择器与 jsf 一起工作 repeat标签？现在，对于 repeat 标签生成的每个元素，都会使用第一个 child 的 css。

这是纯 HTML:

            <table>
                        <tbody>
            <tr>
                                <td class="costs" >
                                    <ul>
                                        <li>25</li>
                                        <li>25</li>
                                        <li>25</li>
                                        <li>25</li>
                                        <li>25</li>
                                    </ul>
                                </td>
                            </tr>
            <tbody>
        <table>   

和 CSS:

.costs ul li:nth-child(1) {
    background-image: url("#{resource['images:icons/food.png']}");
}

.costs ul li:nth-child(2) {
    background-image: url("#{resource['images:icons/wood.png']}");
}

.costs ul li:nth-child(3){
    background-image: url("#{resource['images:icons/stone.png']}");
}

.costs ul li:nth-child(4) {
    background-image: url("#{resource['images:icons/iron.png']}");
}

.costs ul li:nth-child(5) {
    background-image: url("#{resource['images:icons/gold.png']}");
}

.costs ul li:nth-child(6) {
    background-image: url("#{resource['images:icons/time.png']}");
}

这是 JSF 对应物:

                <h:dataTable>    
             <h:column>
                        <div class="costs" >
                            <ul>
                                <ui:repeat value="#{item.goods}" var="goodType">
                                    <li>
                                        <h:outputText value="#{goodType}" ></h:outputText>                                                   
                                    </li>
                                </ui:repeat>
                            </ul>       
                        </div>
                    </h:column>
                </h:dataTable>

提前致谢!

Answer 1

我不知道jsf ，但我假设 <ui:repeat行正在创建一些 html 元素，这就是您的代码失败的原因。

看看这个example你应该走上正轨。

从示例中可以看出，如果li被包裹成 div它永远是:first-child或 :nth-child(1)在你的情况下。

所以你的代码应该与这个 CSS 一起工作:

.costs ul div:nth-child(1) li {
    background: red;
}

其中 div 是由 <ui:repeat 创建的 html 元素. Example