css3：不是div及其子项的选择器

Question

我正在尝试将display：block样式应用于除一个容器之外的所有div标签，并且所有其子项都使用但是我失败了，不知道出了什么问题。

<style>
div:not(.t1 *) {
 display:block
}
</style>

    <div class="t1">some floating content<div class="sub-t1>more floating stuff</div></div>
    <div class="t2">some floating content</div>
    <div class="t3">some floating content</div>

我将不胜感激。

谢谢。

Answer 1

您需要更具体的位置定位到被过滤的.t1

brian已经注意到*中的:not()在css中无效。

然而，核心问题是div:not(.t1)会匹配任何div，包括 {{ 1}}。因此，即使.t1与this fiddle example shows结合，也会失败。

您在评论中说明：

  

我只想过滤特定div中的所有div而不应用   其余页面元素的样式，但只有DIV

基本上，使用div:not(.t1) div获得准确“过滤器”的唯一方法是将其与:not()元素或其他“固定”和“唯一”元素相关联以获取特定内容将放在html结构中。因此，在您的示例html中，我假设它位于body div内，该div位于此插图的#wrapper元素的正下方。然后定位所有其他div除body之外的所有div，你需要的是这个（ see fiddle example ）：

.t1

如果你的html直接位于#wrapper, /* targets wrapper div itself */ #wrapper > div:not(.t1), /* targets all sibling divs to .t1 */ #wrapper > div:not(.t1) div /* targets child divs to any div other than .t1 */ { display: block; } 下，那么这只是（ see fiddle example ）：

body

在这两种情况下，添加的直接子选择器body > div:not(.t1), /* targets all sibling divs to .t1 */ body > div:not(.t1) div /* targets child divs to any div other than .t1 */ { display: block; } 都会阻止>被查看，除非它存在的级别。这样，:not(.t1)的孙div元素不会从其父.t1（其本身是div的子项）中获取错误的读数。

如果.t1处于层次结构中的某个随机未知级别，则无法使用纯css解决方案。

Answer 2

你应该知道默认的div显示为一个块，所以你的方法是错误的。所有div都是块，因此您应该更改您不想要的显示属性。

例如，

div.t1, div.t1 div {
  display: inline;
}

另外，严格说css，你不能将.t1 *放在:not参数中，正如规范所说，它只需要一个“简单的选择器”。

所以div:not(.t1)没问题，div:not(.t1 *)不是。