前言
近些时,越来越觉得自己的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() 样式。