CSS 캐스케이드 란 무엇입니까?-프런트엔드 Q&A-php.cn

CSS 캐스케이드 란 무엇입니까?

青灯夜游

풀어 주다： 2023-01-04 09:35:23

원래의

5520명이 탐색했습니다.

CSS 캐스케이딩은 여러 CSS 스타일의 중첩을 의미합니다. CSS 스타일이 동일한 요소에 대해 동일한 속성을 구성할 때 캐스케이딩 규칙(가중치)을 기반으로 충돌을 처리하고 CSS 선택기로 지정된 속성을 높은 가중치로 선택합니다. 일반적으로 더 높은 무게가 더 낮은 무게를 덮는다고 설명하여 스택이라고도 합니다.

CSS 캐스케이드 란 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 캐스케이딩(중요)

은 여러 CSS 스타일의 오버레이를 의미합니다.

충돌을 처리하는 브라우저의 기능입니다. 두 개의 동일한 선택기를 통해 속성이 동일한 요소로 설정되면 한 속성이 다른 속성을 계단식으로 배열합니다.
원칙:
1. 스타일 충돌에 대해 따라야 할 원칙은 근접성 원칙, 즉 CSS의 쓰기 위치입니다.
2. 스타일은 충돌하거나 계단식으로 배열되지 않습니다.

CSS 상속
CSS 스타일 시트를 작성할 때 하위 태그는 텍스트 색상 및 글꼴 크기와 같은 상위 태그의 일부 스타일을 상속합니다. 상속 가능한 속성을 설정하려면 해당 속성을 상위 요소에 적용하면 됩니다.
참고: 상속을 올바르게 사용하면 코드를 단순화하고 CSS 스타일의 복잡성을 줄일 수 있습니다. 하위 요소는 상위 요소의 스타일을 상속받을 수 있습니다. (텍스트, 글꼴, 줄 등 이러한 요소의 시작 부분은 상속될 수 있으며 색상 속성도 상속될 수 있습니다.)

CSS 우선순위
CSS 스타일을 정의할 때 두 개 이상 규칙이 자주 나타납니다. 동일한 요소에 적용하면 우선순위 문제가 발생합니다.
가중치를 고려할 때 초보자는 다음과 같은 몇 가지 특별한 상황에도 주의해야 합니다.
상속된 스타일의 가중치는 0입니다. 즉, 중첩 구조에서는 상위 요소 스타일의 가중치가 아무리 크더라도 이는 하위 요소에 의해 상속되며 가중치는 둘 다 0입니다. 이는 하위 요소에 의해 정의된 스타일이 상속된 스타일을 재정의함을 의미합니다.
인라인 스타일이 우선 적용됩니다. style 속성이 적용된 요소의 inline 스타일 가중치는 매우 높으며, 이는 100보다 훨씬 크다고 이해할 수 있습니다. 간단히 말해서 위에서 언급한 선택자보다 우선순위가 높습니다.
가중치가 동일한 경우 CSS는 근접성 원칙을 따릅니다. 즉, 요소에 가장 가까운 스타일의 우선순위가 가장 높거나 마지막 순위의 스타일이 가장 높은 우선순위를 갖습니다.
CSS는 가장 높은 우선순위가 부여되는 !important 명령을 정의합니다. 스타일 포지션의 무게와 거리에 관계없이,! 중요한 것이 가장 높은 우선순위를 갖습니다.

CSS 특정성
CSS 가중치를 계산하려면 일련의 공식이 필요합니다. 값은 왼쪽에서 오른쪽으로 구성되며, 한 수준이 한 수준보다 큽니다. . 숫자 사이에는 증가가 없습니다. 시스템, 레벨을 초과할 수 없습니다.
상속 또는 * 값: 0, 0, 0, 0
각 요소(태그) 값: 0, 0, 0, 1
각 클래스, 의사 클래스 값은: 0, 0, 1, 0
각 ID는 0, 1, 0, 0
각 인라인 스타일 값: 1, 0, 0, 0
각 !중요 값: 무한대

1입니다.
2. 상속의 영향을 통해 가중치는 0입니다. [즉, 스타일에 텍스트 레이블이 없습니다] 예:

.colorRed{
    color:#f00; /* 没有选中p标签，所以只是通过继承影响的，权重为0 */
}
p {
    color:#0f0; /* 权重为1 */
}
<div class="colorRed">
    <p>颜色</p>
</div>

로그인 후 복사

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
 
#father #son{ /*权重为0,2,0,0*/
color:blue;
}
#father p .c2{ /*权重为0，1，1，1*/
color:black;
}
div .c1 p .c2{ /*权重为0，0，2，2*/
color:red;
}
#father {
color:green !important; /*继承的权重为0*/
}
 
</style>
</head>
<body>
<div id="father">
<p id="son">颜色</p>
</div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다. :