[分享]css不继承父类样式写法

在 CSS 中，通常情况下样式是会继承的，子元素会继承父元素的样式。但是在某些情况下，我们不希望子元素继承父元素的样式，那么该怎么做呢？ 有几种方法可以避免子元素继承父元素的样式： / 方法一：使用 ...

在 CSS 中，通常情况下样式是会继承的，子元素会继承父元素的样式。但是在某些情况下，我们不希望子元素继承父元素的样式，那么该怎么做呢？

有几种方法可以避免子元素继承父元素的样式：

/* 方法一：使用 !important 关键字 */
.parent {
  color: red !important;
}
 
.child {
  color: black;
} 

这种方法比较简单，就是在父元素的样式中加上 !important 标记，这样子元素就不会继承父元素的样式了。但是 !important 往往被视为一种“不良实践”，因为它可能会破坏样式的优先级。

/* 方法二：使用继承性为 initial 的属性 */
.parent {
  color: red;
}
 
.child {
  color: initial;
} 

该方法是在子元素的样式中修改颜色属性，将其设置为初始值 initial，这样子元素就不会继承父元素的颜色了。但是这种方法只适用于具有继承性的属性。

/* 方法三：使用 not 选择器 */
.parent {
  color: red;
}
 
.child:not(h1) {
  color: black;
} 

该方法使用了 CSS3 中的 not 选择器，它可以排除指定的元素。在这个例子中，我们排除了 h1 元素，也就是说所有不是 h1 的子元素都会有黑色的字体颜色。