您现在的位置是：网站首页> 编程资料编程资料

纯css实现选中切换效果的示例_CSS教程_CSS_网页制作_

2023-11-04 169人已围观

简介这篇文章主要介绍了纯css实现选中切换效果的示例的相关资料,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

最近不太忙，多写几篇文章。很多时候我们用js来实现视觉效果，其实不用那么麻烦，掌握一些常用的css知识能让你事半功倍，这篇文章讲的是使用纯css来实现一个列表项的选中效果，希望对你有所帮助

实现这个效果只需要简单三步走：

0：写一个简单的列表，并且初始化css

html代码

你喜欢哪种水果

css代码

 ul,li{ list-style-type:none; } ul{ border:1px solid #000; padding:5px; width:200px; } li{ margin:2px; background:#ccc; }

1：使用css选择器，选择目标。如果你想对某些元素添加某些视觉效果的时候，首先选中它，再写一些特定的css以区别于其他元素

 input:checked + span{ color:#F66; font-weight:bold; background:#ff0; }

2：隐藏radio，radio默认是个小圈圈，我们先把它隐藏起来，实际上会通过label标签的for属性来实现对radio的选中

 input[type="radio"]{ display:none; }

3:优化样式，这样会骚微好看一点点

 li label, li label span{ display:inline-block; width:100%; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。