問題描述

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