css3 - css中如何让第一个和最后一个不被选中?
问题描述
tr:not(:first-child):hover {background: #ffffdd; }
这样只能匹配让第一行鼠标移动到上面时背景不变黄
tr:not(:last-child):hover {background: #ffffdd; }
这样只能匹配让最后一行鼠标移动到上面时背景不变黄
那么,问题来了.请问如何让第一行和最后一行鼠标移动到上面时背景都不变黄呢?
问题解答
回答1:两个 :not写在一起就好了呀
.a { width: 80px; height:60px; background:#333; border: #eee solid 1px;}.a:not(:first-of-type):not(:last-of-type):hover { /* First-Of-Type 似乎更稳定 */ background: #ffffdd;}
<p class='a'></p><p class='a'></p><p class='a'></p><p class='a'></p><p class='a'></p>2016.9.24 更正
预览好了。 底部
或者 :not(class)如果上面的代码出现问题,使用下面的会更安全
.b { width: 80px; height:60px; background:#333; border: #eee solid 1px;}.b:not(.b-n):hover { background: #ffffdd;}
<p class='b b-n'></p><p class='b'></p><p class='b'></p><p class='b'></p><p class='b b-n'></p>预览
http://codepen.io/KZ-DSF/pen/...
回答2:以ul为例
li:not(:first-child):hover{ background: #ff0000; } li:not(:last-child):hover{ background: #ff0000; } li:first-child:hover{ background: inherit; } li:last-child:hover{ background: inherit; }
其实只要将第一个和最后一个恢复原样覆盖就行了,那么下面也是可以的
li:hover{ background: #ff0000; } li:first-child:hover{ background: inherit; } li:last-child:hover{ background: inherit; }
相关文章:
1. docker gitlab 如何git clone?2. java报错Communications link failure 该如何解决?3. android - 项目时间长了,字符串文件strings有的字符串可能是多余的,有没有办法快速检测那些是没用的?4. javascript - 怎么看网站用了什么技术框架?5. mysql - 用PHPEXCEL将excel文件导入数据库数据5000+条,本地数据库正常,线上只导入15条,没有报错,哪里的问题?6. angular.js使用$resource服务把数据存入mongodb的问题。7. 刷新页面出现弹框8. 关于Android权限的获取问题,大家遇到过这样的情况嘛?9. angular.js - angularJs ngRoute怎么在路由传递空字符串及用ng-switch取得10. PC 手机兼容的 编辑器
