css之:matches()伪类函数的正确使用方式

前言

近些时，越来越觉得自己的css基础不牢，仅仅只会用最简单的css属性，css的新特性和伪类、伪元素等都不熟悉，故使用dash下载了完整的css文档，跟着文档写demo并总结。
:matches()伪类函数是将一列元素选择器作为参数，指定匹配的元素以特定的样式显示。

兼容

目前，:matches()仅有Safari浏览器支持，Chrome浏览器使用:-webkit-any()，Firefox浏览器使用:-moz-any()。
故兼容写法如下：

<style lang="less" scoped>
:matches(header, main, footer){
  p:hover{
    color: blue;
    cursor: pointer;
  }
}

:-moz-any(header, main, footer){
  p:hover{
    color: rebeccapurple;
    cursor: pointer;
  }
}

:-webkit-any(header, main, footer){
  p:hover{
    color: green;
    cursor: pointer;
  }
}

header,main,footer{
  p:hover{
    color: orange;
    cursor: pointer;
  }
}
</style>

使用不同hover颜色进行测试

<section>
    <h1>:matches()伪类函数</h1>

    <header>
      <p>This is header paragraph</p>
    </header>

    <main>
      <ul>
        <li>
          <p>This is my first</p>
          <p>list item</p>
        </li>
        <li>
          <p>This is my second</p>
          <p>list item</p>
        </li>
      </ul>
    </main>

    <footer>
      <p>This is my footer paragraph</p>
    </footer>
  </section>

优先级

:-webkit-any() = :-moz-any() > 元素选择器 > :matches()

• :-webkit-any()、 :-moz-any() 、元素选择器、:matches()并存，取:-webkit-any()或:moz-any()的样式。
• 元素选择器、:matches()并存，若Safari浏览器，取位于尾部的样式；其他浏览器取元素选择器样式。
• :-webkit-any()、 :-moz-any() 、:matches()并存，取:-webkit-any()、 :-moz-any() 样式。