使用中的CSS :is 选择器

|

上次，我向大家展示了几个 :not 选择器用法的示例。今天，我将向大家展示几个 :is 选择器的实用示例。

示例 1：:not() 的相反用法

假设你想锁定除最后一个列表项之外的所有列表项。

li:not(:last-of-type) {
  margin-block-end: 1em;
}

现在，如果你想针对最后一项，可以这样写：

li:last-of-type {
  font-weight: bolder;
}

不知为什么，如果使用 :is 选择器，我的大脑会更容易理解上述代码：

li:is(:last-of-type) {
  font-weight: bolder;
}

它看起来与 :not 选择器完全相反，我更喜欢这种方式。

示例 2：针对修饰符

“修饰符 “一词取自臭名昭著的 BEM 命名规则，我现在仍在使用。

假设我们有一个项目列表，其中一个项目处于活动状态：

.list__item--active {
  color: tomato;
}

下面是使用 :is 选择器的另一种写法：

.list__item:is(.active) {
  color: tomato;
}

我更喜欢上述版本，尤其是当我必须使用 JavaScript 添加active 类时。active 类不仅是一个视觉指示器，还告诉我这个元素是交互式的。

示例 3：在一行中针对更多元素，以提高可读性

下面是另一种常见情况：针对所有 p 和 li 子元素。

.my-selector p,
.my-selector li {
  font-size: 1rem;
}

让我们看看 :is 选择器是如何让这个片段变得更好的。

.my-selector :is(p, li) {
  font-size: 1rem;
}

要我说，一行总比多行好。

示例 4：hover, focus, 和 active 状态

在使用 :is 选择器之前，我是这样编写悬停状态的：

.my-selector:hover,
.my-selector:focus,
.my-selector:active {
  color: tomato;
}

使用 :is 选择器，我可以在一行中写出这些内容：

.my-selector:is(:hover, :focus, :active) {
  color: tomato;
}

如果 :is 选择器的特异性太 “强”，可以使用 :where 选择器，它可以使特异性为 0，但要小心，因为这可能会产生不希望看到的结果。

如果您使用的是 VS Code，请添加此代码段，以提高键入效率。

"Hover Focus Active": {
  "prefix": "*hfa",
  "body": [
    "${1:*}:is(:hover, :focus, :active) {\n\t$2\n}"
  ],
  "description": "State: hover, focus, active"
}

现在输入 *hfa，然后点击 tab，你就得到了一个有用的 :is 代码段。

结论

有些人会说他们可以不用 :is 选择器。我也可以不用它，但我知道我随时都可以使用超棒的 :is 选择器，让我的代码更易读，这让我的生活变得更美好。

你也许感兴趣的：

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注