CSS 상속 및 계단식에 대한 자세한 설명

이전 섹션에서는 문서 구조와 CSS 선택기를 사용하여 다양한 스타일을 요소에 적용하는 방법을 소개했습니다. 오늘은 CSS 캐스케이딩과 상속에 대해 먼저 이야기해 보겠습니다.

상속: 요소가 속성 값을 하위 요소로 전송하는 데 사용하는 메커니즘 간단히 말하면 요소의 특정 속성을 다음을 통해 하위 요소에 전달할 수 있습니다. 계승.

예:

상속 테스트이것은 아닙니다. span

p{color:red}의 콘텐츠입니다. 여기서 p 요소와 trial 요소의 텍스트가 다음 속성으로 인해 빨간색으로 변하는 것을 볼 수 있습니다. p 요소는 범위에 의해 상속됩니다. 그러나 일부 속성은 상속을 통해 전달할 수 없습니다.
예를 들어 테두리는 상속을 통해 얻을 수 없습니다. 사실 상속은 이해하기 쉽지만 캐스케이딩(Cascading)과 함께 이해해야 합니다.

계단식: 요소에 어떤 스타일을 사용해야 할지 결정할 때 상속과 선언의 특수성을 함께 고려해야 하기 때문에 어떤 CSS 스타일을 활성화해야 하는지를 이 프로세스라고 합니다. 계단식.

위에서 언급한 특이사항을 살펴보겠습니다.

먼저 질문하겠습니다. 다음 두 쌍의 규칙 중 어느 것이 승리할까요?

h1{color:red }
바디 h1{색상:파란색}

h2{색상:빨간색}
h2.color{색상: green}

위의 두 쌍의 규칙 중 분명히 하나만 이길 수 있는데, 어느 것이 이겨야 할까요? 답은 각 선택자의 특수성에 있습니다.

선택기의 구체적인 특이성은 다음과 같습니다.
1 규칙에 지정된 각 ID 속성 값에 대해 특이성은 0씩 증가합니다. 1 ,0,0
2. 속성 선택자와 의사 클래스와 일치하는 규칙의 각 클래스 선택에 대해 구체성이 0,0,1,0
3. 규칙의 각 요소와 의사 요소에 대한 구체성은 0,0,0,1입니다.
4. 결합자와 와일드카드는 구체성에 아무런 영향을 미치지 않습니다.
5. 인라인 스타일의 특이도가 1,0,0,0 증가합니다
6. 상속된 속성은 특이도가 0도 아니므로 와일드카드보다 낮아야 합니다.
7.!important는 항상 승리합니다.

위의 두 가지 규칙 집합에 대한 결과는 다음과 같습니다.

h1{color:red}                                                                                 🎜> 몸체 h1{색상:파란색} 0,0,0,2

h2{색상:빨간색} 0,0,0,1
h2. color{color:green} 0,0,1,0
그래서 빨간색과 녹색이 적용됩니다.

따라서 계단식 규칙은 다음과 같습니다.

1. 코드에서 모든 선택자를 찾습니다.

2. 가중치 정렬 및 원산지 정렬 규칙 표시, 표시! 중요한 스타일이 우선하며 생산자, 독자 및 사용자 에이전트의 세 가지 출처가 있습니다.

3. 요소 선언의 특정 순서.

4. 요소 선언의 등장 순서.

CSS 상속과 캐스케이딩에 대한 더 자세한 글은 PHP 중국어 홈페이지를 참고해주세요!