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 又会是什么颜色呢?
更多专业前端知识,请上 【猿2048】www.mk2048.com