如何将css属性设置为元素而不是innerhtml [重复]答案

【问题标题】：How to set css properties to element but not to innerhtml [duplicate]如何将css属性设置为元素而不是innerhtml [重复]
【发布时间】：2019-11-07 20:43:19
【问题描述】：

我想知道是否有任何方法可以为元素设置属性，但不能为它的子元素设置属性。

例如

<div>
<span>A child</span>
</div>

span子不会受到影响。

所以如果我想给 div 一个模糊过滤器并且不想影响元素的子元素，我该怎么做呢？

【问题讨论】：

取决于你要设置的属性。

标签： html css

【解决方案1】：

CSS 是分层的；应用到父级的任何属性都会被子级自动继承：

为父级赋予属性同时排除子级的唯一方法是另外为子级赋予覆盖父级的属性（具有更高的specificity）：

最好使用 initial 值（“重置”）值来完成此操作，但您可以使用您喜欢的任何其他值：

div {
  color: red;
}

div > span {
  color: initial;
}

<div>Parent
  <span>A child</span>
</div>

【讨论】：

谢谢，你可以使用 div > * 得到所有的孩子！

【解决方案2】：

您可以在要影响的元素上设置所需的属性，然后选择该元素的子元素并取消设置相同的属性或为其赋予不同的值。

这能回答你的问题吗？

【讨论】：

【解决方案3】：

如果您直接定位div（在这种情况下），则span 也会被强制模糊。

但是，您可以使用 pseudo element 伪造 div，可能是这样的：

div {
    width: 200px;
    height: 200px;
    position: relative;
}

/* A fake box with the same dimensions as the div */
div::before {
    content: "";
    background: red;
    display: block;
    filter: blur(10px);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

span {
    position: relative; /* Z-index purposes */
}

<div>
    <span>I'm not blurry :D</span>
</div>

【讨论】：

【解决方案4】：

你可以给它们单独的类，并在 css 中单独指定选项。

【讨论】：

哦，是的，抱歉，我删除所有代码只会留下关于单独类的内容
没问题，感谢编辑:)