css子为什么没有继承父

CSS是前端开发中非常重要的一部分，它可以控制网页的样式。但是，CSS中的一些属性是不会被子元素继承的，这给开发者造成了一些困扰。

先来看一下不继承属性的列表：

    caption-side
    color
    cursor
    direction
    font-family
    font-size
    font-style
    font-variant
    font-weight
    font-stretch
    letter-spacing
    line-height
    opacity
    outline
    outline-color
    outline-style
    outline-width
    overflow
    text-align
    text-decoration
    text-indent
    text-shadow
    text-transform
    vertical-align
    white-space
    word-spacing

为了更好地理解，我们可以通过一个例子来说明：

    <div class="parent">
        <h1 class="child">子元素</h1>
    </div>

    .parent{
        color: red;
    }

我们想让<h1>元素也继承parent的颜色，于是我们写下了这个代码：

    .child{
        color: inherit;
    }

然而，事实却不尽如人意，子元素并没有继承父元素的颜色。

为什么会这样呢？这是因为CSS中存在一些属性是没有继承性的。这是为了保证网页的样式不会出现混乱，同时也避免了出现一些不必要的问题。

如果我们想让子元素继承父元素的属性，可以使用一些特殊的选择器，比如：.parent .child来重写子元素的属性。

总之，在进行CSS样式设计的时候，我们需要注意哪些属性是有继承性的，哪些是没有继承性的，这样才能更好地掌控网页的样式，让网页呈现出我们想要的效果。