举例说明:not()的使用场景有哪些

Answer 1

可以理解为反向选择器
举例：

1

2

33333

<style> p:not(#strong){ color:red; } </style>

可以直接选择到前两个p元素

Answer 2

:not 伪类，匹配到不符合条件一组选择器

:not(p) {
color: wheat; // 除了 p 选择器之外，其他的元素的字体颜色都设置为小麦色
}

Answer 3

/* 子级之间留 10px 空隙 */
.gap-right-10 > :not(:last-child) {
  margin-right: 10px;
}

/* 有数据时加上标题 */
.list-wrap:not(:empty):before {
  content: attr(data-title);
}

/* flex 容器中都不压缩宽度 */
.flex-row {
  display: flex;
  align-items: center;
  & > .grow { flex-grow: 1; }
  & > :not(.grow) { flex-shrink: 0 }
}