如何提升browser和mobile类的CSS特异性权重以覆盖indicator样式？

解决方案 #

你可以通过以下几种方式提高选择器特异性，优先级从推荐到不推荐排序：

• 组合多类选择器（最推荐）
  直接把元素的两个类名拼接成选择器，两个类选择器的权重为20，远高于单类选择器.indicator的权重10，不需要修改原有HTML结构，也不会过度提升权重影响后续维护：

  /* 原有样式 */
  .indicator {
    display: inline-block;
  }
  
  /* 覆盖样式，权重更高 */
  .browser.indicator {
    display: block; /* 替换为你需要的display值 */
  }
  .mobile.indicator {
    display: none; /* 替换为你需要的display值 */
  }
  

• 结合父级选择器叠加权重
  借助元素的父级标签/类名拼接选择器，比如示例中父级是td标签，拼接后权重为11，也高于单类选择器的权重：

  td .browser {
    display: block;
  }
  td .mobile {
    display: none;
  }
  

• 使用!important兜底（不推荐）
  万不得已的情况下可以给属性加!important强制提升优先级，但会破坏全局权重规则，后续再要覆盖该属性会非常困难，非必要不使用：

  .browser {
    display: block !important;
  }
  

内容的提问来源于stack exchange，提问作者George Macarubbo III