CSS伪类:not()

需求场景

如下图所示： 如果当前页面是首页的话，样式如图一所示；如果当前页面不是首页的话，样式如图二所示；

CSS 伪类:not()

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类。

mdn 链接 (opens new window)

例子 🌰：

/* 选择所有不是段落（p）的元素 */
:not(p) {
    color: blue;
}

实现

<!-- isAppPage位true时是首页-->
<div :class="['home-wrap', isAppPage ? 'app-page' : '']">
    <i class="el-icon-s-home"></i>
    <span>首页</span>
</div>

.home-wrap:not(.app-page) {
    cursor: pointer;
    background-color: #eee;
}
.home-wrap:not(.app-page):hover {
    background-color: #e5f4ff;
    color: #2196f3;
}