css - 仅将 CSS 应用于外部类

Question

这是我一直在尝试解决的问题 - 但失败了。

一些简单的html

<div class="md-material">
    <div class="md-material">don't apply styles to this one</div>
</div>

我想做的是仅将样式应用到外部类 - 所以如果它恰好是一个 child 就离开它。

我使用了 :not 的各种组合，但都没有成功。

这是我目前正在使用的 - 它有效 - 但似乎不是正确的答案。

.md-material   {
    margin-left: -8px;
    width: calc(~"100% + 16px");
}
.md-material .md-material   {
    margin-left: 0;
    width:100%;
}

:not 是否有效，或者它超出了范围？

Answer 1

编辑 编辑: 如果您可以使用非 CSS 解决方案，则可以使用 jQuery 来应用它。看看这个片段:

$(".md-material:not(.md-material .md-material)").addClass("parent-style");

.md-material {
  font-size: 12px;
}

.parent-style {
  margin-left: -8px;
  width: calc(~"100% + 16px");
  font-size: 20px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="md-material">
  Styled
  <div class="md-material">Not Styled</div>
</div>

编辑: 似乎只适用于 Safari。显然，Safari在:not中实现了复杂的选择器，其实就是css4。如需更多兼容的解决方案，请查看其他答案。如果我发现解决方法，将会更新。

原答案:

希望这就是您想要的。虽然不是您指定的样式，但您应该明白了。

.md-material:not(.md-material .md-material)   {
    margin-left: -8px;
    width: calc(~"100% + 16px");
    font-size: 20px;
    padding: 10px;
}
.md-material   {
    font-size: 12px;
}

<div class="md-material">
    Styled
    <div class="md-material">Not Styled</div>
</div>