选择器的伪类:用于更好的匹配元素,使代码更加的简洁和更好理解;
:not()
;否定的伪类
- 优先级为0,优先级由括号中的表达式决定;
:not(p)
由p决定 - 可以不断的级联;
input:not(:disabled):not(:read-only) {}
;表示处于不禁用,也不处于只读的状态 - 不可出现多个表达式,也不支持选择符;
li:not(li, od)
; 尚未支持
:not()的巨大的用处在于告别重置的问题;
重置web中的样式,就好比我们在项目中经常使用到的:添加.active
类名来控制样式的显示与隐藏/改变样式,往常的写法都是:
.cs_li {
display: none;
}
.cs_li.active {
display: block;
}
而我们可以使用:not()
伪类,可以更好的实现:
.cs_li:not(.active) {
display: none;
}
在列表中的设置<li>
的边框时也可使用其: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 {}