LESS CSS 选择器结合 not 和 :after 伪元素

Question

我有 3 个主要元素：.submit-it、.send-it、.get-results。

我希望它们的所有 :after 元素都具有特定的样式，除非它们具有类 excluded 或 error。我认为这会起作用，但它不起作用。

.submit-it, .send-it, .get-results {
  &:not(.excluded), &:not(.error) {
    &:after {
      content: 'text';
    }
  }
}

Answer 1

通过生成以下选择器，您实际上是在为所有 :after 伪元素设置样式，而不管它们的 classes。

.submit-it:not(.excluded):after,
.submit-it:not(.error):after, { ... }

通过选择不带 class excluded 的所有元素和不带 class error 的所有元素，您间接选择了所有个元素，因为这两个事件并不互斥。

因此，您将链接 :not() 伪 classes，并替换：

&:not(.excluded), &:not(.error)

与：

&:not(.excluded):not(.error)

.submit-it, .send-it, .get-results {
  &:not(.excluded):not(.error) {
    &:after {
      content: 'text';
    }
  }
}

将输出：

.submit-it:not(.excluded):not(.error):after,
.send-it:not(.excluded):not(.error):after,
.get-results:not(.excluded):not(.error):after {
  content: 'text';
}

LESS CSS 选择器结合 not 和 :after 伪元素

LESS CSS selector combining not and :after pseudo element

css

css-selectors

less