css实用短代码，持续更新

伪类选择器 :has() 匹配子元素的父类应用一些样式

// 仅匹配子元素包含input  的li样式
    li:has(input) {
        background-color: red;
    }

伪类选择器:not() 用来匹配不符合一组选择器的元素；不支持选择符

    input:not(:disabled):not(:read-only) {
        color: red;
    }
    div:not(.active) {
        display: none;
    }

伪类选择器:is()，:where() 选择该列表中任意一个选择器可以选择的元素 两者方法相同，where等级永远为0不受括号里面的影响

    ul :is(textarea, input) {
        background: red;
    }
   ul :where(textarea, input) {
        background: red;
    }

&:focus-within 分发冒泡响应 input

    .count:focus-within {
        border: 1px solid red;
    }
    <div class="count"><input /></div>

accent-color accent-color属性可以在不改变浏览器默认表单组件基本样式的前提下重置表单组件的颜色。 目前支持的HTML元素有：

<input type=”checkbox”>
<input type=”radio”>
<input type=”range”>
<progress>

li{ accent-color: blue;}
<ul id="ul">
    <li>复选框：<input type="checkbox" checked></li>
    <li>单选框<input type="radio" checked></li>
    <li>范围选择框：<input type="range"></li>
    <li>进度条：<progress value="0.8"></li>
</ul>

in-range 超出范围 input 超出 min 和 max 属性的范围

/* in-range */
input:in-range{
color: 'blue';
}

/* out-of-range */
input:out-of-range{
color: 'red';
}

object-fit

值	描述
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}