Vue.js スタイル適応されない

Question

<img src="/images/location.svg" class="location" />にかかるスタイルのmargin-rightを無くしたいです。
他のimgではmargin-right:16px;が適応されているのですがimg src="/images/location.svg"だけはmarginを適応させたくなかったのでimgにlocationというclassを作り、 margin-right: initial;のスタイルを当てました。デベロッパーツールで確認したところ.locationのスタイルは適応されておらずmarginがついたままになっています。どうしたらいいでしょうか？

 <p class="basicInfo">
   <img src="/images/location.svg" class="location" />
    {{ user.locality }}, {{ user.country }}
 </p>

<style lang="scss" scoped>
.basicInfo {
  padding: 12px 24px;
  img {
    margin-right: 16px;
  }

}
.location {
  margin-right: initial;
}

Answer 1

提示いただいたコードだと CSS の優先度は .location < .basicInfo img になります。
img.location とすれば優先度を上げられます。