CSS의 계단식 메커니즘 분석

이 글에서는 주로 CSS 계단식 메커니즘에 대한 관련 정보를 소개합니다. 계단식 메커니즘은 작성자(코드를 작성하는 사람), 사용자(페이지를 탐색하는 사람) 및 사용자 에이전트(일반적으로 참조) 간의 스타일 충돌을 해결할 수 있습니다. 브라우저로) 지금 공유하세요. 모두를 위한 참고 자료입니다.

CSS에 계단식 메커니즘이 있는 이유

CSS에는 동일한 요소의 특정 속성에 동시에 영향을 미치는 여러 스타일이 있을 수 있기 때문입니다. 계단식 메커니즘은 작성자(사람들)의 문제를 해결할 수 있습니다. 코드 작성), 사용자(브라우저) 페이지 사용자)와 사용자 에이전트(일반적으로 브라우저) 간의 스타일 충돌입니다.

캐스케이드의 각 스타일 규칙에는 가중치 값이 있습니다. 여러 규칙이 동시에 적용되는 경우 가중치가 가장 큰 규칙이 우선 적용됩니다. 일반적으로 작성자가 지정한 스타일 가중치는 사용자 스타일 가중치보다 크고, 사용자 스타일 가중치는 클라이언트(사용자 에이전트) 가중치보다 높습니다. 일반적인 중량값과 개체가 있는지! 중요하게도 구체성은 위치와 관련이 있습니다. 계단식 순서로 보면 다음 가중치 값은 작은 것부터 큰 것까지

(1) 사용자 에이전트 스타일

(2) 사용자 일반 스타일

(3) 작성자 일반 스타일

(4) 작성자 중요 스타일(! important)

( 5) 사용자 중요 스타일(!important)

(6) 두 스타일이 동일한 코드에서 나온 경우(예: 둘 다 작성자(코드)에서 온 경우) 해당 스타일 선언이 똑같이 중요하면 계산됩니다. 특이도가 높으면 특이도가 낮은 스타일이 커버됩니다

(7) 특이도가 동일하면 나중 스타일의 우선순위가 높아집니다

사용자가 설정한 중요한 스타일이 더 높은 이유 작성자가 설정한 중요한 스타일보다 우선순위가 높은 이유는 사용자가 페이지 글꼴 크기 조정 등과 같은 일부 특별한 요구 사항을 쉽게 구현할 수 있도록 하기 위함입니다.

선택기 특이성 계산

(1) 요소의 스타일 속성에 선언이 나타나면 a는 1로 계산됩니다.

(2) b는 모든 선택기와 같습니다. ID 선택자 수의 합

(3)c는 선택자의 모든 클래스 선택자와 속성 선택자와 동일하며 의사 클래스 선택자 수의 합

(4)d는 모든 레이블 선택과 같습니다. 선택자 선택자와 의사 요소 선택자의 수를 합한

a-b-c-d는 선택자의 구체성입니다. 비교 순서는 먼저 시작되며, 먼저 큰 사람이 더 높은 우선순위를 갖습니다.

참고:

1. Inherited는 우선순위가 가장 낮고 구체성이 없습니다.

2. 문자(예: +, >)와 범용 선택기(*)를 결합하면 구체도가 0

.box{} /*特异度=0，0，1，0*/
.box p{} /*特异度=0，0，1，1*/
#nav li{} /*特异度=0，1，0，1*/
p:first-line{} /*特异度=0，0，0，2*/
 /*特异度=1，0，0，0*/

입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS

의 백분율 문제 분석

위 내용은 CSS의 계단식 메커니즘 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!