dom结构:
<h1><b>h1</b></h1> <h2><b>h2</b></h2> <h3><b>h3</b></h3> <h4><b>h4</b></h4> <h5><b>h5</b></h5> <h6><b>h6</b></h6>
css:
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { color: hotpink; }
可以写成:
:where(h1, h2, h3, h4, h5, h6) > b { color: hotpink; }
或:
:is(h1, h2, h3, h4, h5, h6) > b { color: hotpink; }
:where()和:is()的区别?
权重不同,:where()的权重为0,:is()的权重为最强的选择器
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { color: hotpink; } :where(h1, h2, h3, h4, h5, h6) > b { color: red; }
此时:where()的样式被原来的样式覆盖
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { color: hotpink; } :is(h1, h2, h3, h4, h5, h6) > b { color: red; }
此时:is()的样式会覆盖原来的样式