CSS优先级别

最新推荐文章于 2024-06-16 17:29:19 发布

qq_45670012

最新推荐文章于 2024-06-16 17:29:19 发布

阅读量143

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hhbcib2bbhjb&title=CSS%E4%BC%98%E5%85%88%E7%BA%A7%E5%88%AB

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

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>