css优先级和继承性

1、优先级

优先级从高到低：内联样式 > id选择器 > 类选择器、伪类选择器、属性选择器 > 元素选择器、伪元素选择器。以下表格是对应的权重。

内联样式	（1,0,0,0）
id	（0,1,0,0）
class  / 伪类  / 属性	（0,0,1,0）
元素 / 伪元素	（0,0,0,1）

例子一

HTML

<span class="span_class" id="span_id">背景颜色是什么呢？</span>

CSS

        span{
            background-color: red;
        }
        .span_class{
            background-color: yellow;
        }
        #span_id{
            background-color: green;
        }

结果

例子1中，span元素的背景颜色是'red'、'yellow'、'green'中的哪一个呢？

首先，第一个只有一个元素选择器，计算权重为（0,0,0,1）；第二个只有一个类选择器，计算权重为（0,0,1,0）；第三个只有一个id选择器，计算权重为（0,1,0,0）。

从左到右进行比较，三个选择器的优先级权重的第一位值都为0，所以看第二位，值分别是0、0、1，明显第三个选择器的优先级权重更高，所以span元素的背景色是绿色。

例子二 

HTML

<div class="box_class" id="box_id">
      <a href="#" class="a_class" id="a_id">a标签的背景颜色是什么呢？</a>
</div>

CSS

    .box_class .a_class{
        background-color: red;
    }
    #box_id a{
        background-color: yellow;
    }

结果

例子2中，第一个选择器的计算权重是(0,0,2,0)，第二个选择器的计算权重是(0,1,0,1)，从左到右逐一进行比较，第一位都是0，比较下一位，下一位分别是0、1，明显第二个选择器的优先级权重更高，所以a标签的背景色是'yellow'。

例子三

HTML

<div class="box_class" id="box_id">
    <a href="#" class="a_class" id="a_id">a标签的背景颜色是什么呢？</a>
</div>

CSS

.box_class .a_class:hover{
    background-color: red;
}
#box_id a{
    background-color: yellow;
}

结果

例子三中，我想要实现这样的效果，a标签背景是'yellow'，但是当鼠标悬停在a标签上时背景色从'yellow'变成'red'。我们可以发现，上诉代码无法实现这样的效果，鼠标悬停时背景色没有发生改变。

为什么？我们分别计算这两个选择器的优先级权重，第一个是(0,0,3,0)，第二个是(0,1,0,1)，第二个优先级权重大于第一个，所以鼠标悬停时背景颜色无法改变。

把第一个选择器修改为以下内容，此时鼠标悬停改变颜色的效果就有了。原因是第一个选择器的优先级权重是(0,1,1,1)，第二个选择器的优先级权重还是(0,1,0,1)，第一个的优先级大于第二个，鼠标悬停时背景颜色可以从'yellow'变成'red'。

#box_id a:hover{
    background-color: red;
}

2、继承性

css中，有的属性有继承性，有的没有。

2-1、有继承性的css属性 

1. 文本相关属性：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing、color。
2. 列表相关属性：list-style-image、list-style-position、list-style-type、list-style。
3. 表格相关属性：border-collapse、border-spacing、caption-side、table-layoute。
4. 其他属性：Cursor、visibility等等。

2-2、没有继承性的css属性

1. 背景相关属性：background-color、background-image、background-repeat等。
2. 边框属性、内边距、外边距、宽度、高度等

怎么知道一个属性有没有继承性呢？可以查阅相关文档，这里介绍MDN。

访问https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height ，你可以查阅到 line-height 属性是可以继承的。访问https://developer.mozilla.org/zh-CN/docs/Web/CSS/height，你可以查看到  height 属性是不能被继承的。

2-3、利用 inherit 可以让没有继承性的属性被继承

HTML

    <div class="father">
        <div class="son">this is span</div>
    </div>

CSS

.father{
    width: 100px;
    height: 100px;
    border: 2px solid black; 
}
.son{
    background-color: red;
}

 效果

此时，父元素高度height为100px，而子元素的高度由内容撑开。显然，子元素没有继承父元素的height，因为height属性没有继承性。

在原来代码的基础上添加以下内容，可以让父元素的height属性被子元素继承。

*{
    height: inherit;
}

效果：

 

此时子元素的高度和父元素的高度是一样的！