基础

问题

  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>lidiv ul li各一个。无论其顺序如何,始终是后一个生效。

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

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

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

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