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