Thymeleaf休息：检查css样式的变化

Question

我实现了一个带有复选框的树，其中包含一些代码[1]。

树本身没有任何问题。然后，我提交了百万美元标签，以便在提交外部表格时获取复选框：

<input type="checkbox" th:id="'cb_' + *{cellline.key}"/>
<label>
    <input type="checkbox" form="covariate_form" th:field="*{interfaceCommand.celllines}" th:value="*{cellline.key}"/>
<span></span>
</label>
<label th:for="'cb_' + *{cellline.key}" th:text="${cellline.key}"></label>                                

这会在th：block中被调用几次。

css如此显示勾选标记（来自[1]）：

.acidjs-css3-treeview label input:checked + span::before{
    content: "\2714"; /* Checkmark */
    box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
    opacity: 1;
}

css输入（应该）看到输入th：fied = interfaceCommand ..然后将内容设置为\ 2714（复选标记）。

问题是百里香为某些内部处理产生了另一个输入：

<label>
    <input form="covariate_form" type="checkbox" value="22Rv1" id="celllines2" name="celllines">
    <input type="hidden" name="_celllines" value="on"><span></span>
</label>

在第三行中，您可以看到百里香叶产生的隐藏输入。此隐藏输入会破坏css（输入：已选中）选择器，并且不会选中该复选框。因为：已检查的css选择器仅适用于上一个元素。

可能有几种解决方案，包括在检查上层时将隐藏设置为检查（但这可能会破坏百里香的形式），或者以某种方式禁用隐藏的输入（这会破坏百里香的东西）。没有隐藏的输入线，一切都可以正常工作。

为了尝试一切，我创建了一个 jsfiddle [2] （此处缺少自动选择所选复选框下方的javascript代码）

[1]

[2] http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html

Answer 1

实际答案

您可以将label input:checked + span::before选择器替换为label input:checked ~ span::before以使其正常工作。 +选择器基本上会选择在检查输入后立即放置的所有span::before。然而，~只会选择前面带有已检查输入元素的每个span::before。这意味着“orig”输入复选框和范围之间可以有一个/多个其他元素。

有关css选择器的更多信息，请参阅https://www.w3schools.com/cssref/css_selectors.asp。

检查更新的jsFiddle：https://jsfiddle.net/Lnwoz21e/7/

其他问题

Id应始终是唯一的。

  

id全局属性定义必须具有的唯一标识符（ID）   在整个文件中是独一无二的其目的是识别元素   链接（使用片段标识符），脚本或样式时   （使用CSS）。

在您的情况下，多次使用id会破坏树视图的功能（打开和关闭节点）。