최근에 CSS 우선순위에 대해 더 잘 설명하는 블로그를 보았습니다. 비록 인터넷에 관련 기사가 있지만 그래도 여러분의 참고를 위해 다시 게시했습니다.
CSS 우선순위의 발음에 대한 자세한 설명 CSS 우선순위에는 4가지 수준(텍스트 내 선택자, ID 선택자, 클래스 선택자, 요소 선택자)과 각 수준의 발생 횟수가 포함됩니다. CSS의 우선순위는 이 네 가지 수준의 발생 횟수를 기준으로 계산됩니다.
다음은 인용문입니다: [GOVO 블로그에서 재인쇄]
우선순위 판독은 "그룹"으로 나누어야 하며 그룹은 서로 독립적이며 왼쪽에서 오른쪽으로 비교됩니다. 그룹으로 표시되며 쉼표로 구분됩니다.
예제 소스 코드
[www.downcodes.com] 선택기( a , b , c , d )
비교: ↑ , ↑ , ↑ , ↑
w3c.org의 원본 텍스트에 표시된 선택기(a, b, c, d)는 4개의 그룹 a, b, c, d로 나뉘며 모두 양의 정수이고 기본값은 0이며 다른 선택기에 해당합니다. 구조와 구성이 형성됩니다. 선택자 간 우선순위를 비교할 때 왼쪽에서 오른쪽으로 1:1로 비교하면 비교가 더 커지면 비교를 중지할 수 있습니다.
예제 소스 코드
[www.downcodes.com] li.red.level {} /* a=0 b=0 c=2 d=1 -> 특이성 = 0 , 0 , 2 , 1 */
/*비교 ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 특이성 = 0 , 0 , 1 , 1 */
/*비교 ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 특이성 = 0 , 0 , 1 , 3 */
/*비교 ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> 특이성 = 0 , 1 , 0 , 0 */
/*비교 ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> 특이성 = 1 , 0 , 0 , 0 */(위 표에서 ↑는 여전히 비교가 필요함을 의미하고, √는 비교가 필요함을 의미합니다. 결과는 여기에서 얻어졌습니다. 결과)
또한 올바르게 작성되는 한 선택기의 구조는 다음과 같이 우선순위를 통해서만 대략적으로 알 수 있습니다.
1,0,0,0은 요소 내의 스타일을 나타냅니다.
0,2,1,1은 두 개의 ID 선택자, 클래스 또는 의사 클래스 또는 속성 선택자, 요소 선택자로 구성된 선택자를 나타냅니다.
CSS 우선순위 규칙의 세부사항: 발음을 수정한 후 세부 규칙에 대해 이야기를 시작할 수 있습니다.
CSS가 style 속성에 쓰여지면 그룹 a의 값은 1만 되고 그렇지 않으면 0이 됩니다. style에 쓰여진 스타일 문은 실제로 선택자가 아니므로 여기에서 그룹 b, c, d의 값은 모두 0이고 실제 선택자만 그룹 b, c, d 값을 갖습니다.
b 그룹 값은 ID 선택기 #ID, ID 선택기 수에 따라 결정되며 그룹 값은 누적됩니다.
c 값 그룹은 클래스, 의사 클래스 및 속성 선택기에 의해 결정되며 값 그룹은 누적됩니다.
d 개의 값 그룹은 요소 이름, 즉 요소 선택기에 의해 결정되며 값 그룹은 누적됩니다.
이 네 가지 값 세트는 서로 다른 유형의 선택기에 해당하며 서로 영향을 미치지 않으며 읽기 규칙에 따라 비교됩니다.
!중요, 근접성 원칙과 상속은 여기에서 논의되지 않으며, W3Cbbs.com에 와서 논의하는 예제 코드도 없습니다.
예는 다음과 같습니다. CSS 우선순위 문제
CSS 우선순위에는 4가지 수준(텍스트 선택기, ID 선택기, 클래스 선택기, 요소 선택기)과 각 수준의 발생 횟수가 포함됩니다. CSS의 우선순위는 이 네 가지 수준의 발생 횟수를 기준으로 계산됩니다.
CSS 우선순위 계산 규칙은 다음과 같습니다.
예제 소스 코드
[www.downcodes.com] * 페이지에 정의된 스타일에 1,0,0,0을 추가합니다.
* 각 ID 선택기(예: #id)에 대해 0,1,0,0을 추가합니다.
* 각 클래스 선택기(예: .class), 각 속성 선택기(예: [attribute=]) 및 각 의사 클래스(예: :hover)에 0,0,1,0을 추가합니다.
* 각 요소 선택기(예: p) 또는 의사 요소 선택기(예:firstchild) 등에 대해 0,0,0,1을 추가합니다.
그런 다음 이 4개의 숫자를 개별적으로 추가하여 CSS에서 정의된 각 우선순위의 값을 얻습니다.
그런 다음 왼쪽에서 오른쪽으로 비트 단위로 크기를 비교하십시오. 숫자가 큰 CSS 스타일이 더 높은 우선순위를 갖습니다.
예:
CSS 파일 또는 <style>은 다음과 같이 정의됩니다.
예제 소스 코드
[www.downcodes.com] 1. h1 {색상: 빨간색;}
/* 요소 선택기, 결과는 0,0,0,1 */
2. 몸체 h1 {색상: 녹색;}
/* 두 개의 요소 선택기, 결과는 0,0,0,2 */
3. h2.grape {색상: 보라색;}
/* 요소 선택기와 클래스 선택기, 결과는 0,0,1,1*/
4. li#answer {색상: 네이비;}
/* 요소 선택자, ID 선택자, 결과는 0,1,0,1 */
요소의 스타일 속성은 다음과 같이 정의됩니다.
예제 소스 코드
[www.downcodes.com] h1 {색상: 파란색;}
/* 요소 선택기 페이지에 정의되어 있으며 결과는 1,0,0,1입니다*/
참고: 여기에 모든 숫자가 겹쳐집니다. (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1 ,0,0,1)=(1,1,1,6)
이후 h1 요소의 색상은 파란색이 됩니다.
알아채다:
1. !important로 선언한 스타일이 우선순위가 가장 높습니다. 충돌이 있으면 다시 계산됩니다.
2. 우선순위가 동일한 경우 마지막에 나타나는 스타일을 선택합니다.
3. 상속된 스타일의 우선순위가 가장 낮습니다.
