CSS 우선순위 해석

CSS 우선순위에 대해 이야기하기 전에 CSS가 무엇이고 어떤 용도로 사용되는지 이해해야 합니다.

먼저 CSS에 대해 간단히 설명하겠습니다. CSS는 Cascading Style Sheets의 약어입니다. 그 사양은 인터넷 역사에서 독특한 개발 단계를 나타냅니다. 요즘 웹페이지 제작에 종사하는 친구들이라면 웹페이지를 만드는 과정에서 CSS를 사용해야 하는 경우가 많기 때문에 CSS에 대해 들어본 적이 없는 사람은 거의 없을 것입니다.

둘째: CSS를 통해 문서에 풍부하고 수정하기 쉬운 모양을 설정할 수 있어 웹페이지 제작자의 작업 부담을 줄여 제작 비용과 사후 유지 관리 비용을 줄일 수 있습니다.

사실 CSS가 무엇인지, 그 기능이 무엇인지 이야기하는 것은 완전히 중복되는 일입니다. 웹 페이지 제작에 종사하는 친구들은 이미 어느 정도 접해 봤을 것입니다.

집에 더 가까이 다가가서 오늘의 주제를 살펴보겠습니다.

1. CSS 우선순위란 무엇인가요?

소위 CSS 우선순위는 CSS 스타일이 브라우저에서 구문 분석되는 순서를 나타냅니다.

2. CSS 우선순위 규칙

스타일이 우선이기 때문에 이 우선순위에 동의하는 규칙이 있을 것이고, 이 "규칙"이 이 글의 초점이다.

스타일 시트의 구체성은 다양한 규칙의 상대적 중요성을 설명합니다. 기본 규칙은 다음과 같습니다.

1. 선택기의 ID 속성 수를 계산합니다.
2. 선택기의 CLASS 속성 수를 계산합니다.
3. 선택기에서 HTML 태그 이름의 수를 셉니다.

마지막으로 공백이나 쉼표를 추가하지 않고 올바른 순서로 세 개의 숫자를 쓰면 세 자리 숫자를 얻습니다(css2.1에서는 4자리를 사용합니다). (숫자를 세 자리로 끝나는 더 큰 숫자로 변환해야 합니다.) 선택기에 해당하는 숫자의 최종 목록을 사용하면 높은 숫자의 어떤 기능이 낮은 숫자의 기능보다 우선하는지 쉽게 확인할 수 있습니다.

예를 들어:

1. 각 ID 선택기(#someid)에 대해 0,1,0,0을 추가합니다.
2. 각 클래스 선택기(.someclass), 각 속성 선택기([attr=value] 등의 형식) 및 각 의사 클래스(형식: hover 등)에 0,0,1,0을 추가합니다.
3. 각 요소 또는 의사 요소(:firstchild) 등에 대해 0,0,0,1을 추가합니다.
4. 다른 선택기에는 전역 선택기 *와 0,0,0,0이 포함됩니다. 추가하지 않는 것과 동일하지만 이는 일종의 특이성이기도 하며 이에 대해서는 나중에 설명하겠습니다.

3. 기능 분류를 위한 선택기 목록

다음은 속성별로 정렬된 선택기 목록입니다.

위의 표만으로는 이해하기 어려울 것 같습니다. 다음은 또 다른 표입니다.

위에서 보면 HTML 태그의 가중치는 1, CLASS의 가중치는 10, ID의 가중치는 100, 상속된 가중치는 0임을 쉽게 알 수 있습니다(후술하겠습니다).

이 규칙에 따라 숫자열을 조금씩 더해 최종 가중치를 얻은 다음, 비교하고 선택할 때 왼쪽에서 오른쪽으로 조금씩 비교하세요.

우선순위 문제는 실제로 충돌 해결 문제입니다. CSS 선택기로 동일한 요소(콘텐츠)를 선택하면 우선순위에 따라 다른 CSS 규칙을 선택해야 합니다.

그렇다면 우리는 CSS의 상속에 대해 이야기해야 합니다.