Question

标题说明了一切。是否有可能使一个元素，它的所有的孩子失去所有的CSS属性？

演示：

<div class="class-defined-but-should-not-affect-the-div">
<!-- content + children -->
</div>

CSS：

.class-defined-but-should-not-affect-the-div {
    background-color: green;
}

.class-defined-but-should-not-affect-the-div > .content {
   /* tons of other properties */
}

这个例子只是为了让你明白，实际的情况是不同的。元素，我想从CSS属性STAY AWAY由万吨子元素。我无法收集所有的类和ID并撤消效果。我需要一些动态的解决方案，可能是通过JS。

编辑：不去除类和id属性

任何帮助将不胜感激。

Answer 1

可以使用all属性unset的所有属性。

body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue;  color: red; }
blockquote { all: unset; }

<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.

片段从链接源

Answer 2

您不能仅删除元素的CSS属性。你可以覆盖它们或者删除class或id。

，最好的方法是有一个肘节类。

setTimeout(()=>{
  document.getElementsByClassName('class-defined-but-should-not-affect-the-div')[0].classList.remove('toggle');
}, 2500);

.class-defined-but-should-not-affect-the-div {
    font-size: 20px;
    color: grey;
}
.toggle.class-defined-but-should-not-affect-the-div{
    background-color: red;
    padding: 5px;
}
.toggle.class-defined-but-should-not-affect-the-div * { /* all children */
    background-color: blue;
    padding: 5px;
}
.toggle.class-defined-but-should-not-affect-the-div p {
    background-color: yellow;
}

<div class="toggle class-defined-but-should-not-affect-the-div">
  <div>
    <p>Text</p>
  </div>
</div>

Answer 3

您可以在父级all: initial;中建立div，以在其内部恢复默认的CSS。完成后，您可以在其子代上建立新的CSS样式。

这是CSS all子句的定义：

在所有属性重置所有属性，除了Unicode的比迪和方向，到其初始或继承的值（所有：初始|继承|未设置）。

初始：的变化的所有属性施加到元件或元素的父到它们的初始值
继承：将应用于元素或元素父级的所有属性更改为其父级值
取消设置：如果可继承，则将应用于元素或元素父级的所有属性更改为其父级值，否则将其更改为初始值

body { 
    /* Set CSS for all document */
    color: green; 
    font-size: 30px;
    font-weight: bold;
}

div {
    /* Set CSS for all DIVs */
    background-color: blue;
    border: solid 7px black;
}

.class-defined-but-should-not-affect-the-div {
    all: initial; /* Set default CSS */
}

.class-defined-but-should-not-affect-the-div > .content {
    /* Set new CSS for DIV childrens with "content" class */
    background-color: yellow;
    color: blue; 
}

<div class="class-defined-but-should-affect-the-div">
    I have got CSS styles
</div>

<div class="class-defined-but-should-not-affect-the-div">
    I have not got CSS styles
    <br/>
    <label class="content"> I have got new CSS styles</label>
</div>

从元素及其子元素中删除所有CSS属性

3 个答案: