CSS 특이성 점수는 어떻게 계산되나요?

CSS 특이성, 은 포인트를 기준으로 다양한 CSS 선택기를 차별화하거나 우선순위를 지정하는 프로세스입니다. 특이도 포인트가 가장 높은 선택기가 승리하고 해당 선택기의 CSS 스타일이 해당 요소에 적용됩니다.

각 CSS 선택기의 포인트 계층 구조와 우선순위는 아래 표에 나와 있습니다. -

의 중국어 번역은 입니다.

Sr.No.	일련번호	CSS 선택기	특이도 점수
1	요소 선택기	1
2	클래스 선택기	10
3	ID 선택기	100
4	인라인 CSS	1000
5	요소+클래스 선택기	1 + 10 = 11
6	요소+ID 선택기	1 + 100 = 101

사용 사례 − 클래스와 ID가 있는 요소가 있고 클래스 선택기와 ID 선택기를 사용하여 CSS 스타일을 추가하고 싶다고 가정해 보겠습니다. 이 경우 ID 선택기가 클래스 선택기보다 10배 더 구체적이므로 ID 선택기에 의해 정의된 CSS 스타일을 사용합니다.

이제 코드 예제를 통해 이러한 선택기의 차이점과 우선순위를 자세히 이해해 보겠습니다.

단계

• 1단계 - 첫 번째 단계에서는 클래스 및 ID 속성을 사용하여 HTML 요소를 정의합니다.

• 2단계 - 이 단계에서는 CSS 선택기를 사용하여 요소를 선택하고 우선순위를 확인하여 요소에 대한 CSS를 작성합니다.

Example

의 중국어 번역은

Example

입니다.

다음 예에서는 다양한 CSS 선택기와 우선순위 간의 차이점을 보여줍니다. -

으아악

위의 예에서는 두 개의 서로 다른 선택기의 도움으로 동일한 요소를 선택하여 동일한 요소에 동일한 CSS 속성을 사용했으며 더 높은 특이도 포인트로 선택 항목을 명확하게 볼 수 있습니다. 브라우저의 CSS가 요소에 적용됩니다. .

예 2

아래 예에서는 특별한 점에서 CSS 선택기의 차이점에 대해 자세히 설명합니다. -

으아악

위의 예에서는 동일한 CSS 속성을 다시 사용했지만 다른 CSS 선택기에서는 다른 값을 사용했습니다. 메인 div 요소의 경우 인라인 선택자와 ID 선택자를 사용하여 CSS를 적용했지만, 인라인 선택자가 ID 선택자보다 우선순위가 훨씬 높기 때문에 인라인 CSS를 요소에 적용했습니다. h2 헤더의 경우에는 ID와 요소+ID 선택자를 사용했는데, 후자의 CSS가 더 구체적이므로 해당 요소에는 요소+ID 선택자의 CSS가 적용됩니다.

결론

이번 글에서는 CSS 특정점 계산에 대해서 배웠을 뿐만 아니라, 다양한 CSS 선택자 내부에 작성된 CSS의 우선순위와 해당 특정점의 차이를 자세히 알아보고, 코드 예제 연산을 통해 연습해보았습니다. 동일한 요소의 CSS 속성에 서로 다른 값을 부여하기 위해 서로 다른 선택기를 동시에 선택하여 CSS 선택기의 차이점을 확인했습니다.

위 내용은 CSS 특이성 점수는 어떻게 계산되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!