CSS 클래스 선택기 클래스 이름 우선 순위 인스턴스에 대한 자세한 설명

• code

  <style>
     .a{
    background: red;
     }
     .b{
    background: yellow;
     }
  </style>
  <div class="a b">A</div>

• 렌더링 효과
  

  처음에는 요소의 클래스 클래스에서 클래스 이름의 순서를 바꾸면 렌더링 효과가 해당 요소의 순서에 따라 순차적으로 렌더링될 것이라고 생각했습니다. 클래스 이름

• code

  <style>
     .a{
    background: red;
     }
     .b{
    background: yellow;
     }
  </style>
  <div class="b a">A</div>

• 렌더링 효과
  

  요소 클래스의 클래스 이름 순서를 변경해도 렌더링 순서에는 영향을 주지 않습니다.

• code

     <style>
     .b{
    background: yellow;
     }
     .a{
    background: red;
     }
     </style>
  <div class="a b">A</div>

• 렌더링 효과
  

  스타일 시트에서 클래스 순서 변경 렌더링 순서가 영향을 받습니다

  결론: 두 가지 클래스에 동일한 속성이 있습니다. CSS 스타일 시트에서는 적용 순서가 아래에서 위로 입니다.

위 내용은 CSS 클래스 선택기 클래스 이름 우선 순위 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!