css3多列设置ul中的li两列显示,但出现的问题是点击其中的li,实际显示的却是底下的li的情况。

Question

设置webkit-column-count:2原来设置float的时候没有出现这种情况。
如图
明明点击的是第一个，但显示的确实下边一个。
在实际运行中总是点错。
不知该怎么解决

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这个问题可以通过使用CSS伪类:first-child来解决。这个伪类可以确保只有最左侧的元素（即第一个子项）被选中。

首先，在HTML中为每个li元素添加:first-child选择器：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <!-- 更多 -->
</ul>

然后，在CSS中为这些li元素应用样式，以确保它们只在页面加载时首次渲染：

li:first-child {
    /* 需要的样式 */
}

这样，当您滚动到页面顶部并重新加载页面时，点击的第一个li元素将始终显示出来，而不会显示底部的其他li元素。