css如何实现ul里的li背景逐渐变浅

来源：蜘蛛抓取(WebSpider) 时间：2018-08-22 07:00 标签： cssulli选中变色
css 实现 ul li 的显示与隐藏
时间： 22:32:09
&&&& 阅读：704
&&&& 评论：
&&&& 收藏：0
标签：本文从CSS角度来实现导航栏的显示与隐藏，用到了ul、li标签
html源代码：
有点小感悟：总是先设置默认情况：默认不显示或者默认黑色，然后再设置hover时的具体情况
li颜色变化比较简单：设置个全局颜色（默认颜色），然后li:hover设置hover时的颜色；
li 显示比较复杂，因为涉及到自菜单显示情况：总是先设置下属所有子菜单全显示，然后设置间接子菜单不显示（存在间接子菜单的情况）。
&标签：原文地址：http://www.cnblogs.com/maxiaoshuai/p/5459712.html
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！css技巧:如何处理ul li边框重合
下面就是一个很好的实践，就让我们来谈谈用ul li如何实现边框重合：
*{ margin:0; padding:0;}
.box{ width:350 height:500 background:#999; padding-top:60 padding-left:60}
.box li{ float: list-style:none}
.box li a{
border:5px solid #
display: width:100
height:60 text-decoration:
margin:0 0 -5px -5
z-index:0;
text-align:
line-height:60
font-size:30
.box li a:hover{ border:5px solid #333; z-index:1;}
&ul class=&box&&
&li&&a href=&#&&1&/a&&/li&
&li&&a href=&#&&2&/a&&/li&
&li&&a href=&#&&3&/a&&/li&
&li&&a href=&#&&4&/a&&/li&
&li&&a href=&#&&5&/a&&/li&
&li&&a href=&#&&6&/a&&/li&
&li&&a href=&#&&7&/a&&/li&
&li&&a href=&#&&8&/a&&/li&
&li&&a href=&#&&9&/a&&/li&
&li&&a href=&#&&10&/a&&/li&
&li&&a href=&#&&11&/a&&/li&
&li&&a href=&#&&12&/a&&/li&
&li&&a href=&#&&13&/a&&/li&
&li&&a href=&#&&14&/a&&/li&
&li&&a href=&#&&15&/a&&/li&
下一篇：已是最新文章
相关推荐：
联系邮箱：20:42 提问
CSS3中的ul,li{}; ul li{}; ul&li{}这三个有什么区别？
转行学WEB前端，为什么上课听讲师讲都理解，可以到了下课自己回家再练习就蒙B了，好郁闷。
为什么用ul,li才能取得图片的效果？小弟百度了可以没有具体答案。求前辈们可以告知？非常感谢！
按赞数排序
ul,li{}：设置所有ul和li元素的样式
ul,li{color:red}
&ul&&li&红色&/li&&/ul&
&ol&&li&红色&/li&&/ol&
ul li{}：只设置ul下的li元素
ul li{color:red}
&ul&&li&红色&/li&&/ul&
&ol&&li&浏览器默认颜色，黑色，而不是红色&/li&&/ol&
ul&li{}：设置ul标签下的直接li元素，这个样式没多大意义，因为ul的合法子元素是li，应该用其他元素来举例好点，不过你硬要插入不合法元素也可以，如下面的
ul&li{color:red}
&li&红色&/li&
&li&黑色&/li&
直接子元素示例你可以看这个多明显
div&b{color:red}
&b&红色&/b&
&span&&b&黑色&/b&&/span&
ul,li{}; ul li{}; ul&li{}
这是三个选择器，ul,li{}是分组选择器，只有在多种选择器需要设置同一个样式时，才会使用这个。
ul li{}是包含（后代）选择器，用于将指定的ul下面的所有li设置同一样式。
ul&li{}是子代选择器，用于将指定标签下面的第一代子元素设置同一样式.。
具体情况下选择具体的选择器会达到事半功倍的效果。
其实我也不太懂你想问什么，不过以下我说的，希望对你学习有些许帮助：
当你使用ul 或者ol时，要明白html标签当中有些标签默认自带的一些显性的属性是我们在实际使用中基本不用的，
所以需要写规则将其重定义，列表默认有填充与边界,li默认还带序号或点，一般我是这样写一次搞定它们:
ul,ol,li{margin: 0; padding: 0;list-style:}
----------------------同志你好，我是CSDN问答机器人小N，奉组织之命为你提供参考答案，编程尚未成功，同志仍需努力！
----------------------同志你好，我是CSDN问答机器人小N，奉组织之命为你提供参考答案，编程尚未成功，同志仍需努力
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&li&深颜色&/li&
&li&中颜色&/li&
&li&浅颜色&/li&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
1、如果是全部渐变，可以在ul上使用渐变背景色如：
background: -webkit-linear-gradient(#333, #999);
2、如果你的li块的颜色是统一的可以使用js做简单的计算
希望对你有所帮助
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
时渐变就用用background: linear-gradient渐变，li单独单色变浅就每个li给各自的背景色
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
li之间连着的话给容器设linear-gradient啥的，中间有间距的话想了想，用伪元素给挡一挡也行；还是用JS把。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
给ul 从上到下的渐变就行了 不要老是考虑li
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。

我要回帖

更多关于 cssulli选中变色 的文章

 

随机推荐