Html CSS应用于父级不'；我没有课

以下是我试图实现的目标，可能走错了方向

我的页面上的所有按钮都有css

button, input[type=button]{
  background-color: red;
}

目标是将该类应用于站点上的所有按钮，除非该按钮位于类为“clean”的父级中。父母可以更高

<div>
  <button>Class Applied</button>
</div>

<div class="clean">  <- Parent 1
  <div>  <- Parent 2
    <div>  <- Parent 3
      <button>Class NOT Applied</button>
    </div>
  </div>
</div>

申请类别
将其添加到第一块代码下面的任意位置，并为.clean按钮选择所需的样式类型。它应该工作（测试）

像这样的

div.clean button { 
    // if parent has clean class
    background-color: red;
}

div:not(.clean) button { 
    // if parent has not clean class
    background-color: white;
}

div.clean div button { 
    // button has any parent div with .clean class
    // and atleast one subparented div
    background-color: red;
}

div.clean div:not(.clean) button { 
    // button has any parent div with .clean class
    // and atleast one subparented div which has not .clean class
    background-color: red;
}

div.clean div div button { 
    // button has any parent div with .clean class
    // and atleast 2 subparented divs, now set the color as white
    background-color: white;
}


HTML
不去上班。我可能无法使用该按钮。这可能是一个角度指示。所以我可以用div和class clean来包围指令，我的风格不会被应用。这太具体了。父样式可能不是一个div，它可以是5-10层以上。然后，您应该可以使用前2个样式。请注意术语<代码>父项3

是您的

按钮的唯一父项<代码>父项1

和

父项2

是

祖先

。另外，您没有应用

类

您正在应用

样式

。我只有jQuery解决方案。没有完全适合您的场景的CSS解决方案。您应该改变您的方式（比如使用.styled按钮而不是使用.clean），修复使用initial或使用脚本的代码。将背景色重置为initial有什么意义。一开始不应该设置为红色？

div.clean button { 
    // if parent has clean class
    background-color: red;
}

div:not(.clean) button { 
    // if parent has not clean class
    background-color: white;
}

div.clean div button { 
    // button has any parent div with .clean class
    // and atleast one subparented div
    background-color: red;
}

div.clean div:not(.clean) button { 
    // button has any parent div with .clean class
    // and atleast one subparented div which has not .clean class
    background-color: red;
}

div.clean div div button { 
    // button has any parent div with .clean class
    // and atleast 2 subparented divs, now set the color as white
    background-color: white;
}

<div>
  <div class="clean">
    <!--Assume this is a directive and I don't know anything about depth of the element-->
    <div>
      <button>
        1. no class applied
      </button>
    </div>
    <button>
      2. no class applied
    </button>
  </div>
  <!-- and this button is on my site and i have control over it-->
  <button>
    3. class applied
  </button>
</div>

*:not(.clean) button,
*:not(.clean) input[type=button] {
  background-color: red;
}

*.clean button,
*.clean input[type=button] {
  background-color: initial;
}