CSS

css 函数

clamp()

clamp(300px, 90%, 700px)

解释：一行代码设置宽度、最小宽度、最大宽度，三个参数：最小值、首选值和最大值

max()

max(100%, 800px)

解释：100%比较大就是 100%，反之 800px，返回 max

min()

min(100%, 800px)

解释：100%比较小就是 100%，反之 800px，返回 min

:where()

解释：伪类函数选择器，它接受一个选择器列表作为参数，并将给定的样式应用于该列表中的任何元素

可以将

header a:hover,
main a:hover,
footer a:hover {
}

简化为

:where(header, main, footer) a:hover {
}

记住:where()的优先级始终为 0，不因上下文顺序覆盖其他样式

同时:where()是一个安全选择器，不会因为列表某一个元素无法识别而导致样式无法应用

可应用于改进 css 重置

:is()

解释：与:where()类似，区别在于优先级，:is()与通常理解的上下文优先级一致，受先后顺序和层叠影响，不为 0

:has()

解释：用于匹配具有包含特定后代元素的祖先元素，如.box 拥有.children 子元素，则 .box:has(.children)