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

问题描述

问 题

tr全局属性：

tr {
    background:#f3f900;
}

如果这样设置

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

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

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

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

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

解决方案

两个 :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/...

这篇关于css3 - css中如何让第一个和最后一个不被选中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！