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

Question

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

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

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

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

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

Answer 1

Two :not

Just write them together

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

Preview ready. Bottom

or :not(class)

If there is a problem with the above code, it will be safer to use the following one

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

Preview

http://codepen.io/KZ-DSF/pen/...

Answer 2

Take ul as an example

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

In fact, just overwrite the first and last ones as they were, then the following is also possible

  li:hover{
      background: #ff0000;
  }
  li:first-child:hover{
      background: inherit;
  }
  li:last-child:hover{
     background: inherit;
  }