Css ：已检查li元素的功能

如何模拟：检查其他元素，然后输入元素的行为，例如-这当然不起作用，只是为了演示-例如：

li{ background:red;}
li:checked{
background:orange;}

实际上，我想使用一个简单的css解决方案，如果单击了它，我需要更新li元素的样式（

：active

这样做，但仅在单击它的那一刻，我需要它保持更新的样式，只要再次单击它）

---

谢谢

除了复选框之外，不要相信你可以在纯CSS中跟踪点击/未点击状态。我相信你最好的做法是连接一个JS事件监听器，在点击列表项时切换一个类。

对于纯CSS解决方案，唯一的方法是使用带有

复选框的
标签，并隐藏该
复选框：


输入{
显示：无；
}
标签{
颜色：蓝色；
}
输入：选中+标签{
颜色：红色；
}


点击


点击


点击

我会通过在列表项之前设置一个不可见的复选框来实现这一点，并将列表项的内容作为该不可见复选框的标签

css
html

列表项

您可能想尝试以下方法：


。我的ul输入{
显示：无；
位置：固定；
z指数：-1；
}
.我的ul-li标签{
背景：红色；
}
.my ul input[type=“checkbox”]：选中~标签{
背景：橙色；
}


项目1。单击我以更改颜色。


项目2

更改
ul
的颜色，而应仅更改单击的
li
的颜色，它仅更改两个li。尝试在浏览器中使用inspect进行查看。我想说的是，只有单击的
li
才能更改color@Tushar我已经更新了这个例子，它现在是你想要的吗？是的，但不是完全。不管怎样，你已经有主意了。尝试单击
项目2
为什么不在中添加多个复选框demo@Tushar我觉得没必要。将用它更新答案。你应该显示你的HTML的代码结构，这将很容易为你和其他人提供解决方案
li { background:red; }
*:checked + li { background:orange; }
input[type="checkbox"] {
    display: none;
}

<ul>
<input type="checkbox" id="some_name"/>
<li><label for="some_name">The list item.</label></li>
</ul>