CSS 선택기 우선순위는 어떻게 결정되나요?

웹사이트 구축 과정에서 CSS는 웹페이지 스타일을 제어하는 ​​중요한 속성입니다. 그래서 이 글에서는 CSS 클래스 선택기와 CSS 우선순위 순위에 대한 관련 지식을 요약하고 소개하겠습니다.

먼저 CSS 선택기의 종류를 소개하겠습니다:

1. 태그 이름 선택기

지정된 태그 이름에 따라 , 현재 인터페이스에서 해당 이름을 가진 모든 태그를 찾아 속성을 설정합니다.

태그 선택기는 현재 인터페이스에서 해당 이름을 가진 모든 태그를 선택하며, 태그가 얼마나 깊이 숨겨져 있는지에 관계없이 단일 태그를 개별적으로 선택할 수 없습니다. HTML 태그에 있습니다. 태그 선택기로 사용할 수 있습니다.

2. 클래스 선택기

지정된 클래스 이름에 따라 해당 태그를 찾아 속성을 설정합니다.

모든 HTML 태그에는 클래스 속성이 있습니다. 이는 각 태그가 클래스를 설정할 수 있음을 의미합니다. ID 선택기를 작성할 때 클래스는 Add 클래스 앞에 와야 합니다. .; 클래스 이름의 명명 규칙은 id 명명 규칙과 동일합니다. 클래스 이름은 HTML의 특정 태그에 대한 스타일을 설정하기 위해 특별히 설계되었으며, 각 태그는 동시에 여러 클래스 이름에 바인딩될 수 있습니다.

3. ID 선택기.

지정된 ID 이름을 기준으로 해당 태그를 찾아 속성을 설정합니다.

모든 HTML 태그에는 id 속성이 있습니다. 즉, 각 태그는 id를 설정할 수 있으며 id 선택기를 작성할 때 id는 반복할 수 없습니다. #; ID 이름에는 특정 표준이 있습니다. ID의 이름은 문자, 숫자, 밑줄로만 구성될 수 있습니다. 숫자로 시작할 수 없습니다. 엔터프라이즈 개발에서는 일반적으로 스타일을 설정하는 경우 ID를 사용하지 않습니다. , ID가 js이기 때문입니다.

CSS 우선순위를 어떻게 나누나요?

일반적으로 말해서 선택자가 특별할수록 우선순위가 높아집니다. 즉, 선택기 지점이 정확할수록 우선순위가 높아집니다.

일반적으로 1은 태그 이름 선택기의 우선순위를 나타내고, 10은 클래스 선택기의 우선순위를 나타내며, 100은 ID 선택기의 우선순위를 나타냅니다.

예를 들어 위의 예에서 .폴라리스 범위 {color:red;}의 선택기 우선순위는 10 + 1이며, .폴라리스의 우선순위는 10입니다. 자연스럽게 빨간색 문자를 표시합니다. 이 원칙을 이해하면 다음과 같은 우선순위 계산이 쉽습니다.

div.test1 .span var 우선순위 1+10 +10 +1

span#xxx .songs li Priority 1 +100 + 10 + 1

#xxx li 우선순위 100 +1

어떤 상황에서 어떤 선택기를 사용할지에 따라 다른 선택기를 사용하는 원칙이 있습니다. #🎜🎜 #

첫 번째: 정확하게 제어할 태그를 선택하세요.

두 번째: 가장 합리적인 우선순위로 선택기를 사용하세요.

세 번째: HTML 및 CSS 코드는 최대한 단순하고 아름답게.

위 내용은 CSS 선택기 우선순위는 어떻게 결정되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!