何种情况下特异性0-0-1的CSS规则可覆盖0-1-0？!important无效

这种情况本质是高特异性的类选择器声明本身无效，被浏览器直接忽略，优先级规则根本没发挥作用，浏览器只能用有效的低特异性规则。具体场景有这几种：

• font-family声明存在语法错误
  比如字体族名称后多了逗号、引号不匹配，或者用了无效字符，浏览器会直接丢弃这个声明。举个例子：

  /* 语法错误（多余逗号），直接被忽略 */
  .custom-text { font-family: "My Custom Font",; }
  /* 有效声明，正常生效 */
  p { font-family: sans-serif; }
  

  哪怕给.custom-text加!important也没用，因为错误的声明连解析都通不过，谈何优先级。

• 引用了未定义/无效的CSS变量
  如果类选择器的font-family用了没有定义的CSS变量，浏览器会把这个判定为无效声明，转而使用其他有效的规则：

  /* --undefined-font未定义，声明无效 */
  .custom-text { font-family: var(--undefined-font); }
  /* 有效声明，被应用 */
  p { font-family: serif; }
  

• 所有指定字体都不存在，且无有效回退
  类选择器里只写了一个完全不存在的自定义字体，没加sans-serif、monospace这类系统通用字体做回退，浏览器找不到可用字体，就会放弃这个声明：

  /* 字体不存在且无回退，声明无效 */
  .custom-text { font-family: "NonExistentFont-123"; }
  /* 有效系统字体，正常生效 */
  p { font-family: monospace; }
  

浏览器的表现符合规范：优先级规则只对有效解析的CSS声明生效，无效声明会直接被忽略，自然不会覆盖其他有效规则。

内容的提问来源于stack exchange，提问作者Josh