11

css cascade算法

 2 years ago
source link: https://blog.shell909090.org/blog/archives/2883/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

css cascade算法 // Shell's Home

Shell's Home

Copyright © 2022 Shell Xu - License

css cascade算法

calendar

Mar 25, 2022

clock

1 min read

  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也不生效。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK