纯css实现选中的切换效果

最近不是很忙，多写几篇吧。很多时候我们使用js来实现视觉效果。其实并没有那么麻烦。掌握一些常用的css知识，可以让你事半功倍。本文讲的是用纯css实现列表项的选择效果。希望对你有帮助先去链接，点击预览https://codepen.io/Ritr/pen/B...只需要简单三步就可以实现这个效果：0：写一个简单的列表并初始化csshtml代码

WhichdoyoulikePlantfruit

• 香蕉
• 苹果
• orange

css代码ul,li{list-style-type:none;}ul{border:1pxsolid#000;填充：5px；宽度：200px;}li{边距：2px;background:#ccc;}1:使用css选择器，选择一个目标。如果你想给一些元素添加一些视觉效果，先选中它，然后写一些特定的css来区别于其他元素input:checked+span{color:#F66;字体粗细：粗体；background:#ff0;}2：隐藏radio，radio默认是一个小圆圈，我们先隐藏，其实radio会通过label标签的for属性input[type="radio"]{display：没有任何;}3:优化样式，让它显示一点li标签，li标签span{display:inline-block;width:100%;}虽然操作简单，但也是我写了这么久的css的总结。我希望你能给我一个大拇指。谢谢