Question

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

一些简单的HTML

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

我尝试做的只是将样式应用于外部课程 - 所以如果碰巧是孩子就离开它。

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

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

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

:not会工作，还是在范围之外？

Answer 1

编辑编辑：如果您对非CSS解决方案没问题，可以使用jQuery来应用它。看看这个片段：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

原始答案：

希望这是你想要的。不是你指定的风格，但你应该明白这一点。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用自定义data-attribute。以下是示例

＆＃13;

.md-material[data-main="main"]   {
    margin-left: -8px;
    width: calc(~"100% + 16px");
    background:tomato;
    color:blue;
}
.md-material .md-material   {
    margin-left: 0;
    width:100%;
    color:#fff;
}

＆＃13;

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

＆＃13;

仅将CSS应用于外部类

2 个答案: