Question

给出以下标记

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

mdn

上提供的信息

根据我的解释，这个选择器应该有用。

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

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

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

任何想法为什么？

* 更新*

如果检查链接的fiddle，那么未标记为固定类的行中的列应该浮动。

Answer 1

*:not(.fixed) foo匹配

一个foo元素，它是任何不属于固定类
的元素的后代

这与以下内容不同：

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

如果我们有：

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

然后foo元素是b元素的后代，该元素不是固定类的成员。（也是 <{1}}元素的后代，是该类的成员，但这并不重要，因为a很乐意与*:not(.fixed)元素匹配。）

Answer 2

你的“坏”选择器将任何元素与给定的类匹配，而是没有类fixed 的任何元素的后代。

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

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

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

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

Answer 3

你的选择器过于笼统。由于*也会选择像body这样的东西。正文为not(.fixed)，规则仍将适用。

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

http://jsfiddle.net/sVpTA/2/

CSS

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

Answer 4

实际上，它比你想要的更好。

除了其他内容，

*:not(.fixed)与您的body元素相匹配。最终，在身体的某个地方，它会找到你的clm* div，并应用这些样式。

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

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

哪种方法有效。

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

4 个答案:

CSS