CSS 계단식 메커니즘 사용에 대한 자세한 설명

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천도서:

웹팩 스타일 로딩 상세 분석

20 프론트엔드 실무 프로젝트에서의 CSS 코드 사용 주의사항

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