css选择器的逻辑组合伪类 -not()/ is()/where()

选择器的伪类：用于更好的匹配元素，使代码更加的简洁和更好理解；

:not();否定的伪类

1. 优先级为0，优先级由括号中的表达式决定； :not(p)由p决定
2. 可以不断的级联；
   input:not(:disabled):not(:read-only) {} ;表示处于不禁用，也不处于只读的状态
3. 不可出现多个表达式，也不支持选择符；
   li:not(li, od); 尚未支持

:not()的巨大的用处在于告别重置的问题；

重置web中的样式，就好比我们在项目中经常使用到的：添加.active类名来控制样式的显示与隐藏/改变样式，往常的写法都是：

.cs_li {
	display: none;
}
.cs_li.active {
	display: block;
}

而我们可以使用:not()伪类，可以更好的实现：

.cs_li:not(.active) {
	display: none;
}

在列表中的设置

的边框时也可使用其:not()

.cs_li:not(:nth-of-type(5n)){
	margin-right: 10px; // 除5的倍数项都设置右边的外边距
}

:is()的作用是简化选择器

平时我们开发中经常会用到类似下面的语法：

.cs_li_a > img,
.cs_li_b > img,
.cs_li_c > img {
	display: none;
}

使用:is()简化可写成：

:is(.cs_li_a, .cs_li_b, .cs_li_c) > img {
	display: none;
}

还有一种嵌套之间的关系，相互嵌套，交叉组合得出结论；如下方所示

ol ol li,
ol ul li, 
ul ul li,
ul ol li {
	margin-left: 20px;
}

使用:is()伪类强化，则只需要几行代码：

:is(ol, ul) :is(ol, ul) li{
	margin-left: 20px;
}

:where()与上方的:is()相同，唯一不同的是级别永远为0，也不受括号里面的表达式影响；

使用的方法与:is()完全相同，但优先级永远是0；底下的括号中的优先级完全被忽略，俩句是同一个优先级，并且级别等同于.conten选择器

:where(.article, section) .conten {}
:where(#article, #section) .conten {}