css伪类选择器:is和:not是简化样式书写的重要工具，二者都能根据元素的状态或特征匹配对应的元素，减少冗余的选择器代码，提升css代码的可读性和可维护性。
:is伪类选择器
:is()伪类选择器用于匹配括号中任意一个选择器所对应的元素，相当于把多个选择器的公共样式合并书写，避免重复写相同的样式规则。
基础语法
语法格式为:is(选择器1, 选择器2, ...)，只要元素匹配括号中的任意一个选择器，就会被该规则选中。
使用示例
比如我们需要给h1、h2、h3标签都设置相同的文字颜色和内边距，传统写法需要写三个选择器：
/* 传统写法 */
h1 {
color: #333;
padding: 10px 0;
}
h2 {
color: #333;
padding: 10px 0;
}
h3 {
color: #333;
padding: 10px 0;
}
使用:is()可以合并为一条规则：
/* 使用:is合并写法 */
:is(h1, h2, h3) {
color: #333;
padding: 10px 0;
}
还可以和其他选择器组合使用，比如给类名为box的元素下的p、span、div设置相同样式：
.box :is(p, span, div) {
font-size: 14px;
line-height: 1.5;
}
:not伪类选择器
:not()伪类选择器用于排除括号中指定的元素，匹配所有不满足括号中条件的元素，是选择器的反向匹配工具。
基础语法
语法格式为:not(选择器)，括号中只能写一个简单选择器，不能写选择器列表。
使用示例
比如我们需要给所有li元素设置底部边框，但是排除最后一个li：
/* 传统写法需要单独覆盖最后一个li的样式 */
li {
border-bottom: 1px solid #eee;
padding: 8px 0;
}
li:last-child {
border-bottom: none;
}
使用:not()可以直接排除最后一个li：
/* 使用:not排除最后一个li */
li:not(:last-child) {
border-bottom: 1px solid #eee;
padding: 8px 0;
}
还可以排除特定类名的元素，比如给所有输入框设置边框，但是排除类名为disabled的输入框：
input:not(.disabled) {
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 10px;
}
二者结合使用场景
在实际开发中可以把:is()和:not()结合使用，比如给类名为card的元素下除了最后一个p和span之外的所有p、span设置下边距：
.card :is(p, span):not(:last-child) {
margin-bottom: 12px;
}
注意事项
:is()的优先级由其括号中优先级最高的选择器决定，:not()的优先级由括号外的选择器和括号内的选择器共同决定。:not()括号中不能写多个选择器，也不能写伪元素选择器。- 老旧浏览器对这两个伪类的支持度有限，使用前可以确认项目的浏览器兼容要求。