Elementor自定义CSS被.elementor img覆盖，如何提升优先级？

为啥页面自定义CSS压不过全局样式？ #

Elementor的全局样式.elementor img是「类选择器+元素选择器」的组合，按CSS权重规则，这种组合的权重比你单独写的自定义类.sprachauswahl-flaggen要高。哪怕你是在页面里加的自定义CSS，只要选择器权重不够，照样会被全局样式压下去。

提升优先级的简单操作 #

直接给你的自定义选择器加权重就行，有三种简单方式：

• 方法1：把自定义类和img元素绑一起写
  把你的CSS改成这样：

  img.sprachauswahl-flaggen {
    height: 30px;
    width: auto;
  }
  

  这样选择器的权重和.elementor img一样，再加上页面自定义CSS是在全局样式之后加载的，自然就能覆盖掉全局的height设置。

• 方法2：套个Elementor的父类
  利用Elementor页面自带的父容器类，进一步拉高权重，比如：

  .elementor .sprachauswahl-flaggen {
    height: 30px;
    width: auto;
  }
  

  这个选择器的权重比.elementor img更高，肯定能生效。

• 方法3：临时用!important（尽量少用）
  要是嫌上面两种麻烦，应急可以加个!important强制生效，但别乱用，不然以后改样式容易出冲突：

  .sprachauswahl-flaggen {
    height: 30px !important;
    width: auto;
  }
  

改完刷新页面，用浏览器的检查器看看图片的height属性是不是已经变成你设置的30px就行。

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