CSS를 더욱 간결하고 효율적으로 만들기 위한 CSS의 검색 및 매칭 원리를 이해합니다_경험 교환

간단한 CSS를 살펴보세요:

DIV#divBox pspan.red{color:red;} 관습에 따르면 이 CSS에 대한 우리의 이해는 브라우저가 먼저 divBox ID를 사용하여 DIV 요소를 검색한다는 것입니다. 발견 시 그 아래의 모든 p 요소를 검색한 후, 모든 범위의 요소를 검색하여 범위의 클래스가 빨간색인 것으로 확인되면 스타일을 적용합니다. 이렇게 간단하고 이해하기 쉬운 원리인데, 이런 이해는 완전히 반대이고 잘못된 것입니다.


일치 원칙:

브라우저 CSS 일치는 왼쪽에서 오른쪽으로 검색하지 않고 오른쪽에서 왼쪽으로 검색합니다. 예를 들어 앞서 언급한 DIV#divBox pspan.red{color:red;}의 경우 브라우저의 검색 순서는 다음과 같습니다.

먼저 html에서 class='red'인 모든 범위 요소를 검색하고, 그런 다음 다시 검색합니다. 상위 요소에 p 요소가 있는지 확인한 다음 p의 상위 요소에 divBox라는 ID의 div 요소가 있는지 확인합니다. 둘 다 있으면 일치합니다.

오른쪽에서 왼쪽으로 검색하는 브라우저의 장점은 관련 없는 스타일 규칙과 요소를 최대한 빨리 필터링할 수 있다는 것입니다. 예를 들어 다음 html 및 css는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.