Question

以下选择器不起作用：

*:not(.ignore-mobile) [class^="cell"]{width:100%;}

在我的header元素上：

<header class="nav ignore-mobile">

标题子div与类cell仍显示宽度100％。

知道为什么吗？

更多信息：

我在桌面上使用Chrome 40。

Answer 1

将.ignore-mobile放在你的css选择器中，如下所示：

*:not(".ignore-mobile") [class^="cell"]{width:100%;}

请参阅下面的jsfiddles了解对比：

引号中： http://jsfiddle.net/1jfdukd1/1/

不在引号中： http://jsfiddle.net/1jfdukd1/2/

Answer 2

Div是块元素，因此它们自动获得100％的宽度。如果将所有div的宽度设置为50％，则代码将起作用。

然而，使用两者都很糟糕，这很慢，并且：当你没有选择时，不应该只使用它。总是尝试简短，简单，包括css分类，而不是复杂的排除类。

在这种情况下，显而易见的chouse将只使用div {width：50％; } .ignore-mobile .no-cell {width：100％; }

以下是您的错误代码的工作副本:)

*:not(.ignore-mobile) [class^="cell"] {
  width:100%;
}

div {
  background: red;
  margin: 1em 0;
  width: 50%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<header class="nav ignore-mobile">
  <div class="cell">Test</div>
  <div>Test2</div>
  </header>
</body>
</html>

css：不是选择器不工作

2 个答案: