CSS特性 #

样式 #

选择器 #

:is() & :where() #

:is()函数以选择器列表作为参数，将会选择能被该选择器列表中任何一条规则选中的元素

它可以使选择器的写法更加简洁

aside ul li span.name,
section ul li span.name,
article ul li span.name,
nav ul li span.name,
{
	font-size: 16px;
}

:is(aside, section, article, nav) :is(ul, li) span.name {
	font-size: 16px;
}

:is()不能匹配伪元素，以下的选择器将无法生效

some-element:is(::before, ::after) {
  display: block;
}

目前现代浏览器均已支持:is()选择器（不包括IE）

MDN文档 :is()

:where()选择器与:is()选择器功能相似，但其优先级为0，这代表着它很容易被覆盖

MDN文档 :where()

:has #

:has()的功能极为特殊，它可以通过元素后面及里面的元素确定前面或外面的元素的CSS样式

div:has(p) 表示当 div 中有 p 时，选中 div

div:has(>p) 表示当 div 有子元素 p 时，选中 div

div:has(+p) 表示当 div 后面紧跟一个 p 时，选中 div

div:has(~p) 表示当 div 后续有 p 类型兄弟元素时，选中 div

:has()尚未完全兼容，详见MDN文档 :has