什么是 CSS 选择器优先级（特异性）？计算规则是什么？

#nav-global > ul > li > a.nav-link
复制代码

应用上面的算法，找到 a B ❿❿ D ：

1. 由于没有内联样式，A = 0；
2. ID 选择器总共出现 1 次，B = 1 ；
3. 类选择器出现 1 次，属性选择器出现 0 次，so-0 选择器出现 C = (1 + 0 + 0) = 1;
4. 标签选择器出现了3次，伪元素出现了0次，所以D = (3 + 0) : 可以缩短如：(0, 1, 1, 3)。

   为了熟悉优先级算法，我们来做一些练习：

   li                                  /* (0, 0, 0, 1) */
   ul li                               /* (0, 0, 0, 2) */
   ul ol+li                            /* (0, 0, 0, 3) */
   ul ol+li                            /* (0, 0, 0, 3) */
   h1 + *[REL=up]                      /* (0, 0, 1, 1) */
   ul ol li.red                        /* (0, 0, 1, 3) */
   li.red.level                        /* (0, 0, 2, 1) */
   a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
   #x34y                               /* (0, 1, 0, 0) */
   li:first-child h2 .title            /* (0, 0, 2, 2) */
   #nav .selected > a:hover            /* (0, 1, 2, 1) */
   html body #nav .selected > a:hover  /* (0, 1, 2, 3) */
   复制代码

   好的，现在我们已经弄清楚了优先级是如何计算的。还有一个问题，如何比较两个优先级？ 比较规则是：从左到右比较，较大者获胜。如果相等，则继续右移一位进行比较。如果 4 位都相等，最后一位将覆盖前一位

   我们再看一下示例：

   • html:

   <div class="nav-list" id="nav-list">
   	<div class="item">nav1</div>
   	<div class="item">nav2</div>
   </div>
   复制代码

   • CSS:

   #nav-list .item {
   	color: #f00;
   }
   
   .nav-list .item {
   	color: #0f0;
   }
   复制代码

   计算 - - ♂ 的优先级。左边第一个数字都是0。看左边第二个数字。前者为1，后者为0，所以(0, 1, 1, 0)大于(0, 0 , 2, 0)，即# nva -list .item

   比 .nav-list .item 大，因此字体为红色。

   优先级的特殊情况

   通过上面的优先级计算规则，我们可以知道内联样式的优先级是最高的，但是有没有办法让外部样式覆盖内联样式呢？是的，那么！重要应该采取行动。因为一般内联样式很少用，所以!important也很少用！如果不是覆盖内联样式，建议不要使用！重要，

   可能有人会觉得如果我在内联样式中使用!important，我就不能对外部样式做任何事情了？例如，以下代码：

   • HTML:

   <div class="app" style="color:#f00!important">666</div>
   复制代码

   • CSS:

   .app {
   	color: 0f0!important;
   }
   复制代码

   是的，你赢了。这时候内联样式就太强大了，无论你怎么写外部样式，都无法覆盖它。在当前的代码中必须避免这种情况！请记住，切勿在内联样式中使用！重要

   。最后，！重要真的是无限王吗？其实不是，有些情况我们可以回顾一下！重要，请看下面的例子：

   • html:

   <div class="box" style="background: #f00; width: 300px!important;">我的宽度是多少呢？？<div>
   复制代码

   • css:

   .box {
   	max-width: 100px;
   }
   复制代码

   此时 . box