Question

我实现了以下CSS Selector

选择所有span个元素，但那些类包含单词图标

所以以下似乎正在起作用：

.music-site-refresh span:not([class*="icon-"]) {
  font-family:Montserrat, sans-serif;
}

但我认为它应该是这样的：

.music-site-refresh span:not(span[class*="icon-"]) {
  font-family:Montserrat, sans-serif;
}

但第二个在我的测试平台上不起作用。

有人能解释一下哪一个是正确的，为什么？

以下是一些barfed html：

<span class="cmImageSliderIndicatorActive icon-circle-blank" data-set="0"></span>

<div class="janrain-share-providerslist-provider-image janrain-provider-icon-grayscale-email"></div>

还有更多图标。它不是icon类，这就是我使用class*

的原因

Answer 1

在CSS中，:not被视为伪类，它将其与其他伪类（如:hover，:focus放在同一类别中，等

我认为在考虑其中一个伪类时解释这个更有意义。让我们看看:hover作为一个例子..当你使用{{1它看起来像这样：

:hover

你可以看到冒号将div:hover {} pseduo-class连接到元素..这就是＆＃34;伪类＆＃34;名称来自......它不是一个真正的CSS类，但它的行为与一个类似。它作为修饰符应用于选择器中的原始元素。

现在让我们再看看hover。当你在选择器上使用这个伪类时，它已加入它...所以说:not可以被认为是这样写出来的，为了简化它： / p>

:not(span.icon)

这没有任何意义。

选择除包含单词图标的类以外的所有span元素

1 个答案: