CSS优先级别

CSS样式优先级别：

加权 > 层叠 > 特指度 > 继承

加权：!important
层叠：样式加载顺序
特指度：ICE值
继承：子元素继承父元素样式

CSS代码：

#summer-drinks li {
    font-weight: normal;
    font-size: 12px;
    color: black;
}
#summer-drinks li.favorite {
    color: hsl(0, 100%, 50%) !important;  /* 去掉 !important 的效果? */
    font-weight: bold;
}
ul#summer-drinks li.favorite {
    color: aqua;
}

 

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS权威指南学习</title>
</head>
<body>

    <ul id="summer-drinks">
        <li class="favorite" style="color: teal">Whiskey and Ginger Ale </li> <!-- 加入 !important 的效果? -->
        <li>Wheat Beer </li>
        <li>Mint Julip </li>
    </ul>

</body>
</html>

大家猜猜，不修改代码时第一个 li 会是什么颜色？如果去掉<style>标签中的 !important后 li 又会是什么颜色呢？如果在 li 的style属性中加入 !important后 li 又会是什么颜色呢？

 

posted @ 2018-01-24 19:05  gentsir  阅读(177)  评论(0)    收藏  举报