CSS의 스태킹 및 가중치 설명

여러 선택기에 의해 동일한 태그가 선택되고 각 선택기가 동일한 스타일로 설정된 경우 브라우저에서 로드할 때 어떤 스타일을 따라야 합니까?

다른 선택기로 설정된 동일한 스타일의 경우 로드 시 하나만 선택되며 겹쳐지지 않습니다.

누구의 말을 들어야 하는가의 문제를 해결하기 위해 캐스케이딩(Cascading)이라는 개념이 도입되었습니다.

CSS 스타일 계단식 가중치 값

CSS 사양에 따르면 스타일 규칙이 구체적일수록 가중치 값이 높아집니다. 가중치 값을 계산하는 기준은 많은 기사에서 설명하는 것처럼 "클래스는 10, 태그는 1, ID는 100"이 아닙니다. 하지만 대부분의 경우 올바른 결과를 얻을 수 있습니다.

먼저 "중요>인라인>ID>클래스>레이블|의사 클래스|속성 선택>의사 개체>상속>와일드카드"의 기억하기 쉬운 순서를 살펴보겠습니다.

선택기 가중치 계산

A : 태그의 스타일 속성(인라인 스타일)에 규칙을 작성하면 A=1, 그렇지 않으면 A=0이 됩니다. 인라인 스타일의 경우 선택자가 없으므로 B, C, D의 값이 됩니다. 모두 0 입니다. 즉, A=1, B=0, C=0, D=0(1,0,0,0으로 축약됨, 아래에서도 동일함)입니다.

B: 이 선택기의 ID 수를 셉니다. 있으면 B=1, 없으면 B=0입니다(예를 들어 #header와 같은 선택자는 0, 1, 0, 0으로 계산됩니다).

C: 선택기의 의사 클래스 및 기타 속성 수를 계산합니다(클래스, 속성 선택기 등 포함, 의사 요소 제외). (예를 들어 .logo[id='site-logo'] 와 같은 선택자는 0, 0, 2, 0으로 계산됩니다.) (0,0,2,0인 이유는 나중에 자세히 설명하겠습니다).

D: 이 선택기의 의사 요소 및 레이블 수를 셉니다. (예를 들어 p:first-letter와 같은 선택기는 0, 0, 0, 2로 평가됩니다.)

여러 선택기가 동일한 태그를 선택하고 동일한 스타일을 설정하면 브라우저에서 로드할 속성 값 중 하나를 선택하여 로드하지 않습니다. 값이 계단식으로 표시됩니다. /다른 값을 덮어씁니다.

비교를 위해서는 비교가 필요합니다. 다음은 선택자 간의 가중치 비교입니다. 1. 선택자가 레이블을 선택합니다. 선택기는 태그를 선택하지 않습니다.

먼저 선택기의 가중치에 대해 이야기해 보겠습니다. id>class>label>* (와일드카드)

① 선택기는 태그를 선택합니다.

먼저: 두 태그가 모두 선택된 경우 선택기 가중치를 비교합니다.

선택기에는 가중치가 있으며, 가중치가 더 큰 선택기가 가중치가 작은 선택기 위에 쌓입니다.

중량 계산: 선택기가 선택한 범위가 클수록 가중치는 작아집니다. id>class>label>*

방법: 선택자 수를 세고 먼저 ID 수를 비교한 다음 클래스 수를 비교하고 → 마지막으로 태그 수를 비교합니다.

그림의 주석 순서(ID 수, 클래스 수, 태그 수) 페이지에 표시되는 스타일:

콘솔 디스플레이:

초: 선택기 가중치가 동일한 경우에는 코드 작성 순서를 비교합니다. CSS.

CSS 코드에는 위에서 아래로 로드되는 로드 순서가 있으며 나중에 로드하면 이전 로드를 덮어씁니다.

 #box1 .box2 .box3 p{      (1,2,1)

  　　color: red;

  }

 .box1 #box2 .box3 p{    (1,2,1)

 　　 color: green;

 }

 .box1 .box2 #box3 p{    (1,2,1) 书写顺序最后，层叠前面的样式  　　color: blue;

 }

②선택기에 선택된 태그가 없습니다: 일부 스타일은 상속될 수 있습니다. 누가 상속받나요?

첫 번째: 각 선택기에 의해 선택된 요소와 HTML의 대상 요소 p 사이의 거리를 비교하여 더 가까운 요소와 먼 요소를 쌓아 놓습니다. 근접성 원리라고 합니다.

 #box1{    

　　 color: red;

 }

  .box1 .box2{

  　　color: green;

  } 

  .box3{           选中的标签距离p最近，继承他的

  　　color: blue;

  }

둘째: 거리가 같으면 가중치를 비교하면 가중치가 큰 캐스케이드의 가중치가 작아집니다.

 #box1 .box2 #box3{               (2,1,0)

 　　 color: red;

  }

  .box1 #box2.box2 #box3{   (2,2,0)  　　color: green;

  }

  .box1 .box2 #box3.box3{     (1,3,0)

  　　color: blue;

  }

다시: 거리가 동일하면 선택기 가중치는 쓰기 순서에 따라 동일합니다.

 #box1 .box2 #box3.box3{

 　　 color: red;

  }

  .box1 #box2.box2 #box3{

 　　 color: green;

  }

  #box1.box1 #box2 .box3{

 　　 color: blue;

  }

특히, 가중치 비교 과정에서 특정 스타일 속성의 가중치를 최대로 높일 수 있는 중요한 단어가 있습니다.

근접성의 원칙에 따라 중요한 것은 상속에 영향을 미치지 않습니다.

 #box1 .box2 #box3.box3{

  　　color: red;

  }

  #box3{

  　　color: green !important;    将这条属性的权重提升的最大，与选择器权重无关

  }

  #box1.box1 #box2 .box3{

  　　color: blue;

  }

요약:

마지막으로:

위로 이동 비교 예를 들어 인라인 CSS를 기반으로 하며 CSS의 인라인, 인라인 및 외부 링크 유형 중 이름에서 알 수 있듯이 인라인 또는 외부 링크의 가중치는 인라인 > 인라인 = 외부 링크입니다. 인라인 표현식과 일치하지 않습니다!

위 내용은 CSS의 스태킹 및 가중치 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!