CSS伪类,_is,_not和_where的介绍和使用

CSS伪类,_is,_not和_where的介绍和使用_第1张图片

<div>
 <h1><b>1b>h1>
 <h2><b>2b>h2>
 <h3><b>3b>h3>
 <h4><b>4b>h4>
 <h5><p>5p>h5>
div>

上面代码中我要改变b标签里面的样式,但是其他地方也有b标签,不能使用标签选择器,你会怎么做?
最蠢的就是全部加相同的class,但是那样既不好看又冗余

h1 > b, h2 > b, h3 > b, h4 > b{
     
  color: blue;
}

这样的写法其实也还行,但是可以有更简便的方法,那就是:is伪类选择器(matches是is的前世,但是本质上确实一个东西,用法完全一样)

:is()

:is() CSS 伪类 函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
使用:is()后:

:is(h1,h2,h3,h4,h5,h6) > b {
     
  color: blue;
}

不过该伪类有着一定的兼容性,使用前最好先确定你的浏览器是否兼容
CSS伪类,_is,_not和_where的介绍和使用_第2张图片

:where()

:where() 伪类函数与**:is()**功能相同
:where():is() 的不同之处在于,:where() 的优先级总是为 0 ,但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。
也就是说 :where() 不会增加整体选择器的特殊性(即某条css规则特殊性越高,它的样式越优先被采用)。
:where() 伪类及其任何参数都不对选择器的特殊性有所帮助,它的特殊性始终为零。

:not()

CSS否定伪类,:not(X),是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。
:not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类,它不会增加选择器的优先级
用法也简单,字面意思

div:not(h5){
     }

这里要注意:not()的几个注意点
not()伪类括号里面不能多个选择器

div:not(h5,h4){
     } /* 无效,不支持 */

正确写法应该为:

div:not(h5),:not(h4){
     }

:not()伪类括号里面不支持选择器级联

:not(a.disabled) {
     } /* 无效,不支持 */

正确写法应该为:

:not(a):not(.disabled) {
     }

这里只是简单介绍了这三个伪类元素的用法,但是其实有很多注意点,尤其:not(),有着容易搞混的否定逻辑关系。

你可能感兴趣的:(css,css,html,html5)