:where()和:is()

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()的样式会覆盖原来的样式