css

Question

给定以下标记

<div class="fixed">
    <div class="clmn2">
    </div>
    <div class="clmn2">
    </div>
</div>

以及mdn上给出的信息

根据我的解释，这个选择器应该可以工作。

*:not(.fixed) [class*="clmn"]

不幸的是，它没有，但是确实如此。

div:not(.fixed) [class*="clmn"]

任何想法为什么？

*更新*

如果您检查链接的小提琴，则未标记为固定类的行中的列应该是浮动的。

score 4 · Accepted Answer

*:not(.fixed) foo火柴

一个 foo 元素，它是任何非固定类成员的元素的后代

这不同于：

一个 foo 元素，它不是作为固定类成员的任何元素的后代

如果我们有：

<a class="fixed">
  <b>
    <foo></foo>
  </b>
</a>

那么 foo 元素b是不是固定类成员的元素的后代。（它也是a作为该类成员的元素的后代，但这并不重要，因为它*:not(.fixed)会很高兴地匹配该b元素。）

score 3 · Accepted Answer

您的“坏”选择器匹配任何具有给定类的元素，该类是任何没有类的元素的后代fixed。

由于<html>和<body>元素都没有类fixed并且您的内部<div>s是它们的后代，因此选择器会匹配它们。

“好”选择器只考虑任何<div>没有 class 的后代fixed。由于<div>您的 HTML 中唯一具有后代的也具有该类，因此选择器不匹配任何内容。

一般来说，plain:not(whatever)后跟一个后代组合器并不是很有用。在您的情况下，解决方案似乎是用子组合器替换“后代”组合器>：

:not(.fixed) > [class*="clmn"]

score 1 · Accepted Answer

你的选择器太笼统了。因为*还会选择body之类的东西。并且 body 是not(.fixed)，该规则仍将适用。

将其更改为更具体的内容，例如.row:not(.fixed).

.row:not(.fixed) [class*="clmn"]{
    float: none;
    width: 100%;
    margin-left: 0!important;
}

score 1 · Accepted Answer

实际上，它比您想要的效果更好。

*:not(.fixed)匹配，除其他外，你的body元素。最终，在 body 的某个地方，它会找到你的clm*div，并应用样式。

如果您只想匹配direct非固定事物的后代，请使用：

 *:not(.fixed) > [class*="clmn"] { /* ... */ }

哪个有效。

css - 为什么这个选择器不起作用