邮政 是修道士吗

邮政 普修多类 让你使用 :is 伪类函数, 遵循 CSS 选择器 规格.

:is(input, button):is(:hover, :focus) {
    order: 1;
}

成为:

input:hover {
    order: 1;
}
input:focus {
    order: 1;
}
button:hover {
    order: 1;
}
button:focus {
    order: 1;
}

使用量

添加 邮政 普修多类 对您的项目:

npm install @csstools/postcss-is-pseudo-class --save-dev

使用 邮政 普修多类 作为 邮政 插件 :

import postcss from 'postcss';
import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';

postcss([
  postcssIsPseudoClass(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

邮政 普修多类 在所有节点环境中运行,并有下列特殊指令:

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认情况下,它没有被保存.

postcss([
  postcssIsPseudoClass({ preserve: true })
]).process(YOUR_CSS /*, processOptions */);

:is(input, button):is(:hover, :focus) {
    order: 1;
}

成为:

input:hover {
    order: 1;
}
input:focus {
    order: 1;
}
button:hover {
    order: 1;
}
button:focus {
    order: 1;
}
:is(input, button):is(:hover, :focus) {
    order: 1;
}

特异性匹配Name

这个 specificityMatchingName 选项允许您更改用于调整特异性的选择器. 默认值为 does-not-exist。 。 。 . 如果这是您代码中实际的类, ID 或标签名称, 您需要在此设置一个不同的选项 .

看怎么样 :not 用于修改 具体。 。 。 .

postcss([
  postcssIsPseudoClass({ specificityMatchingName: 'something-random' })
]).process(YOUR_CSS /*, processOptions */);

:is(.button, button):hover {
    order: 7;
}

成为:

.button:hover {
    order: 7;
}

button:not(.something-random):hover {
    order: 7;
}

复杂选择器

关于复杂选择器的警告 :is 伪类功能.

postcss([
  postcssIsPseudoClass({ onComplexSelector: 'warning' })
]).process(YOUR_CSS /*, processOptions */);

演示词

使用伪元素时警告 :is 伪类功能.

QQ Pseudo 元素总是无效的, 将被转换为 ::-csstools-invalid-<pseudo-name>。 。 。 .

postcss([
  postcssIsPseudoClass({ onPseudoElement: 'warning' })
]).process(YOUR_CSS /*, processOptions */);

:is(::after):hover {
    order: 1.0;
}

/* becomes */

::-csstools-invalid-after:hover {
    order: 1.0;
}

* 已知的缺点

具体性

:is 取最具体列表项的特异性. 我们可以增加特异性 :not 选择者, 但我们不能减少它.

转换后选择器的特性与 :is 对于最重要的一点. 不太重要的位点可以具有更高的特异性 :is。 。 。 .

在此之前:

特殊性: 0, 2, 0

:is(:hover, :focus):is(.button, button) {
    order: 7;
}

后为:

/* specificity: [0, 2, 0] */
.button:hover {
    order: 7;
}

/* specificity: [0, 2, 1] */
/* last bit is higher than it should be, but middle bit matches */
button:not(.does-not-exist):hover {
    order: 7;
}

/* specificity: [0, 2, 0] */
.button:focus {
    order: 7;
}

/* specificity: [0, 2, 1] */
/* last bit is higher than it should be, but middle bit matches */
button:not(.does-not-exist):focus {
    order: 7;
}

复杂选择器

在此之前:

:is(.alpha > .beta) ~ :is(:focus > .beta) {
    order: 2;
}

后为:

.alpha > .beta ~ :focus > .beta {
    order: 2;
}

这是一个不同的选择器 .beta ~ :focus 匹配 .beta 接下来是 :focus。 。 。 .
避免这些案件发生.
写入选择器不包含 :is() 此处建议

/* without is */
.alpha:focus > .beta ~ .beta {
    order: 2;
}

如果你有特定的图案,你可以打开一个问题来讨论. 我们可以侦测和改造一些案例,但不能将它们概括为解决所有案例的单一解决方案.