本文介绍一下 CSS 伪类: is 和: not, 并解释一下 is,not,matches,any 之前的关系
- :not
- The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
以上是 MDN 对 not 的解释
单从名字上我们应该能对它有大概的认知, 非选择, 排除括号内的其它元素
最简单的例子, 用 CSS 将 div 内, 在不改变 html 的前提下, 除了 P 标签, 其它的字体颜色变成蓝色,
- <div>
- <span > 我是蓝色 </span>
- <p > 我是黑色 </p>
- <h1 > 我是蓝色 </h2>
- <h2 > 我是蓝色 </h2>
- <h3 > 我是蓝色 </h3>
- <h4 > 我是蓝色 </h4>
- <h5 > 我是蓝色 </h5>
- </div>
之前的做法
- div span,div h2,div h3, div h4,{
- color: blue;
- }
not 写法
- div:not(p){
- color: blue;
- }
从上面的例子可以明显体会到 not 伪类选择器的作用
下面升级一下, 问: 将 div 内除了 span 和 p, 其它字体颜色变蓝色
- div:not(p):not(span){
- color: blue;
- }
还有更为简洁的方法, 如下, 但是目前兼容不太好, 不建议使用
- div:not(p,span){
- color: blue;
- }
兼容
除 IE8, 目前所有主流浏览器都支持, 可以放心使用
- :is
- The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.
以上是 MDN 的解释
在说 is 前, 需要先了解一下 matches
matches 跟 is 是什么关系?
matches 是 is 的前世, 但是本质上确实一个东西, 用法完全一样
matches 这个单词意思跟它的作用非常匹配, 但是它跟 not 作用恰好相反, 作为 not 的对立面, matches 这个次看起来确实格格不入, 而且单词不够简洁, 所以它被改名了, 这里还有一个 issue https://github.com/w3c/csswg-drafts/issues/3258, 也就是它改名的源头
好了, 现在知道 matches 和 is 其实是一个东西, 那么 is 的用法是怎样的呢?
举例: 将 header 和 main 下的 p 标签, 在鼠标 hover 时文字变蓝色
- <header>
- <ul>
- <li><p > 鼠标放上去变蓝色 </p></li>
- <li><p > 鼠标放上去变蓝色 </p></li>
- </ul>
- <p > 正常字体 </p>
- </header>
- <main>
- <ul>
- <li><p > 鼠标放上去变蓝色 </p></li>
- <li><p > 鼠标放上去变蓝色 </p></li>
- <p > 正常字体 </p>
- </ul>
- </main>
- <footer>
- <ul>
- <li><p > 正常字体 </p></li>
- <li><p > 正常字体 </p></li>
- </ul>
- </footer>
之前的做法
- header ul p:hover,main ul p:hover{
- color: blue;
- }
is 写法
- :is(header, main) ul p:hover{
- color: blue;
- }
从上面的例子大概能看出 is 的左右, 但是并没有完全体现出 is 的强大之处, 但是当选择的内容变多之后, 特别是那种层级较多的, 会发现 is 的写法有多简洁, 拿 MDN 的一个例子看下
之前的写法
- /* Level 0 */
- h1 {
- font-size: 30px;
- }
- /* Level 1 */
- section h1, article h1, aside h1, nav h1 {
- font-size: 25px;
- }
- /* Level 2 */
- section section h1, section article h1, section aside h1, section nav h1,
- article section h1, article article h1, article aside h1, article nav h1,
- aside section h1, aside article h1, aside aside h1, aside nav h1,
- nav section h1, nav article h1, nav aside h1, nav nav h1 {
- font-size: 20px;
- }
is 写法
- /* Level 0 */
- h1 {
- font-size: 30px;
- }
- /* Level 1 */
- :is(section, article, aside, nav) h1 {
- font-size: 25px;
- }
- /* Level 2 */
- :is(section, article, aside, nav)
- :is(section, article, aside, nav) h1 {
- font-size: 20px;
- }
可以看出, 随着嵌套层级的增加, is 的优势越来越明显
说完了 is, 那就必须认识一下 any, 前面说到 is 是 matches 的替代者,
any 跟 is 又是什么关系呢?
是的, is 也是 any 的替代品, 它解决了 any 的一些弊端, 比如浏览器前缀, 选择性能等
any 作用跟 is 完全一样, 唯一不同的是它需要加浏览器前缀, 用法如下
- :-moz-any(.b, .c) {
- }
- :-webkit-any(.b, .c) {
- }
结论
通过上面的介绍大概讲述了 CSS 伪类 is,not,matches,any 它们三者的关系
is+not 组合是大势所趋
来源: https://www.cnblogs.com/bfgis/p/11928807.html