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

Question

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

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

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

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

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

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

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