foxdiagtech.com 开发过程中学会的新知识点img:is([sizes="auto" i]

在最近开发https://foxdiagtech.com/ 过程中，发现网页代码中有一个img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }

原来CSS 中也可以编程，加入条件语句的。

这段代码是一段 CSS 代码，下面来详细解释其含义。 ### 整体功能 此代码借助 CSS 选择器选中特定的 `<img>` 元素，然后为这些元素设定 `contain-intrinsic-size` 属性。 ### 代码详细解释 #### 1. 选择器部分 ```css img:is([sizes="auto" i], [sizes^="auto," i]) ``` - `img`：表示选中所有的 `<img>` 元素。 - `:is()`：这是一个 CSS 伪类函数，其作用是选择满足括号内任意一个选择器条件的元素。 - `[sizes="auto" i]`： - `[sizes]` 属于属性选择器，它能选中带有 `sizes` 属性的元素。 - `"auto"` 表明 `sizes` 属性的值要为 `auto`。 - `i` 是不区分大小写的修饰符，这意味着无论 `sizes` 属性的值是 `auto`、`Auto` 还是 `AUTO` 等，都会被选中。 - `[sizes^="auto," i]`： - `^=` 是属性值前缀匹配选择器，也就是选中 `sizes` 属性值以 `auto` 开头，并且后面紧跟逗号的元素。 - 同样，`i` 是不区分大小写的修饰符。 #### 2. 属性设置部分 ```css { contain-intrinsic-size: 3000px 1500px } ``` - `contain-intrinsic-size`：该属性用于指定元素的固有尺寸。当元素使用了 `contain` 属性进行布局约束时，此属性能够让开发者明确指定元素的固有宽度和高度。 - `3000px 1500px`：这分别代表元素的固有宽度和高度。也就是说，被选中的 `<img>` 元素的固有宽度为 3000 像素，固有高度为 1500 像素。 ### 总结 这段 CSS 代码会选中那些 `sizes` 属性值为 `auto` 或者以 `auto,` 开头的 `<img>` 元素，并且把这些元素的固有宽度设为 3000 像素，固有高度设为 1500 像素。