css3 - css中如何让第一个和最后一个不被选中?

问题描述

tr:not(:first-child):hover {background: #ffffdd; }

这样只能匹配让第一行鼠标移动到上面时背景不变黄

tr:not(:last-child):hover {background: #ffffdd; }

这样只能匹配让最后一行鼠标移动到上面时背景不变黄

那么,问题来了.请问如何让第一行和最后一行鼠标移动到上面时背景都不变黄呢?

问题解答

写在一起就好了呀

.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 更正

预览好了。 底部

如果上面的代码出现问题，使用下面的会更安全

.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/...

以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; }