[CSS] 적용 우선순위

적용 우선순위
스타일속성 > id 선택자 > class 선택자 > 태그 선택자

(예제)

// 전체코드

<template>
  <div id="a" class="b" style="color:red">
    적용 우선순위 확인
  </div>
</template>

<script>

export default {

}
</script>

<style scoped>
  .b{
    color:orange;
  }
  #a{
    color:blue;
  }
  div{
    color:green
  }
</style>

 

// 스타일속성

  <div id="a" class="b" style="color:red">
    적용 우선순위 확인
  </div>

 

  // id 선택자
  
  <div id="a" class="b">
    적용 우선순위 확인
  </div>

 

// class 선택자
 
  <div class="b">
    적용 우선순위 확인
  </div>

 

// tag 선택자

  <div>
    적용 우선순위 확인
  </div>