子级元素继承透明度的问题

# CSS属性的继承

我们知道，在CSS中，如果我们没有为子元素设置一些属性，那么子元素的这些属性会继承自父元素，即这个属性是默认继承的，它的inherited的值为yes;最经典的例子是颜色color的属性，如果我们给父级元素设置color：red,那么这个父级元素下的所有子级元素如果没有专门设置color这个属性，那么他们都会继承父级元素的color属性，这个他们的color都会是红色；但如果我们对其中某一个子级元素设置了color属性，这个color属性就会覆盖掉来自父级元素的继承值，子级元素就会优先使用对自己本身设置的color值。

但有些样式并不会继承，比如boder这个属性，对父级元素设置这个属性并不会使子级元素继承到这个值，换句话说，这个属性仅对设置了它的元素有效，这种属性叫做**非继承属性**

不过，有一个关键字inherit，表示显式声明继承来自父级元素属性，这个关键字可以让本来默认没有继承属性的样式继承父级元素的样式，同时，这个关键字的合理运用也可以让我们少写大量的代码。关于这一点，还有另一个属性all，它可以控制所有属性的继承方式吗，其可值如下：

initial    修改所有元素属性或父元素的值为其初始化值

inherit    修改所有元素属性或父元素的值为其父元素的值

unset    修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

revert:使子元素继承父元素所有属性

似乎很简单的样子，但实际操作中，相比于继承样式，我们很多时候更想取消继承，毕竟即使不继承样式我们也可以手动复制粘贴（doge）,但继承很多时候会给我们带来麻烦，比如有时我们想给一个部分的背景设置透明度，但这时我们会发现，所有的子级元素也都被设置了透明度，而且即使给子级元素重新设置透明度也没有用。

解决方案呢，大概有这么几种，最简单的方法是通过绝对定位在同样的位置再加一个盒子，然后把除背景以外的内容放上去，也就是使用两个盒子来完成。除此之外，我们还可以通过给父级元素用background-color:rgba（n,n,n,0.5）的方式设置透明度的方法来代替使用opacity的方式来设置，这是因为background-color是一个非继承属性，子元素就不会继承透明度。

另外，我们其实还可以使用滤镜filter:alpha()来修改透明度。

有时候，我们还可以通过最高权重！important来进行样式覆盖，直接跳过继承属性的问题。