基础

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
• https://www.w3.org/TR/selectors/#specificity
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
• https://www.jianshu.com/p/1c4e639ff7d5

问题

1. 顺序是否影响优先级。
2. link和<style>是否影响优先级。
3. 优先级算法对“继承”，“important”，LVHA的规定。

环境

• Mar 2022
• Debian Linux bullseye
• Chrome 99.0.4844.74

Experiment

<div class="div1" id="div1">
  <ul class="ul1" id="ul1">
    <li class="li1" id="li1">
      a
    </li>
    <li class="li2" id="li2">
      b
    </li>
  </ul>
</div>

顺序影响为，后引入优于前引入。写入div ul li两个，始终是后一个生效。

“>“和” “不改变优先级。写入div>ul>li和div ul li各一个。无论其顺序如何，始终是后一个生效。

link和style不改变顺序行为。写入div ul li两个，一个在css文件中，link进来。一个在style标签中。通过调换顺序，确认始终是后者生效。

important可覆盖内联样式。取一个节点设定style="color: #00ff00;"。当上面css未加!important时，内联样式生效。上面加!important后，定义样式生效。

直接样式+低优先级vs继承样式+高优先级，直接样式生效。写入#div1 #ul1和div ul li各一条。div ul li生效。

直接样式+低优先级vs继承样式+important，important也不覆盖直接样式。例子同上，给继承样式条目加!important也不生效。