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

发布于 2022-09-03 15:16:31 字数 368 浏览 22 评论 0

tr全局属性:

tr {
    background:#f3f900;
}

如果这样设置

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

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

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

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

岁月流歌 2022-09-10 15:16:31

两个 :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;
}
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

2016.9.24 更正

预览好了。 底部

或者 :not(class)

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

.b {
    width: 80px;
    height:60px;
    background:#333;
    border: #eee solid 1px;
}
.b:not(.b-n):hover {
    background: #ffffdd;
}
<div class="b b-n"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b b-n"></div>

预览

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

睡美人的小仙女 2022-09-10 15:16:31

以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;
  }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文