CSS 계단식 스타일을 이해하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 계단식 스타일을 이해하는 방법

清浅

Feb 28, 2019 am 11:40 AM

CSS 캐스케이딩은 브라우저 충돌 처리 기능으로, CSS 캐스케이딩 스타일 충돌 중에는 참조 메서드 충돌, 상속 메서드 충돌, 지정 스타일 충돌이 있습니다. 지정된 스타일과 상속된 스타일 디버깅 사이에 충돌이 있는 경우 지정된 스타일의 충돌이 우선합니다.

CSS에는 상속, 우선 순위 및 계단식이라는 세 가지 주요 기능이 있습니다. 오늘 소개할 내용은 CSS의 세 가지 주요 기능의 계단식 특성으로, 이는 확실한 참고 가치가 있기를 바랍니다. 모두에게 도움이 되기를 바랍니다

CSS 계단식 스타일을 이해하는 방법

[추천 과정: CSS Tutorial]

CSS 계단식 배열

CSS 계단식 배열은 충돌을 처리하는 브라우저의 기능입니다. 속성에 여러 선택기가 설정된 경우 이때는 하나의 선택기만 적용되고 나머지 선택기는 해당 부분을 제거합니다. .

계단식 조건

(1) 동일한 요소

(2) 동일한 속성

(3) 동일한 우선순위

계단식의 스타일 충돌

(1) 참조 방법 충돌

CSS 참조 방법에는 인라인 스타일, 인라인 스타일, 가져온 스타일, 링크 스타일이 포함됩니다. 4가지의 우선 순위는 인라인 스타일 > 인라인 스타일 > 가져온 스타일 > 링크 스타일입니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" src="style.css">
<style>
	body{
		background-color: pink;
	}
</style>
<body>
	<h1 id="优先级">优先级</h1>
</body>
</html>

렌더링은 다음과 같습니다.

CSS 계단식 스타일을 이해하는 방법

(2) 상속 방법의 충돌

CSS에 직접 설정하면 해당 하위 항목이 CSS의 색상 설정, 글꼴 크기, 글꼴 모양, 정렬 및 기타 속성과 같은 속성 값을 상속하는 일부 속성이 있습니다. 상속됩니다. 그러나 상자, 위치, 레이아웃 등과 같은 속성에 대해서는 상속이 없습니다.

상속 방법의 충돌은 모든 상위 요소 대신 자신에게 가장 가까운 상위 요소를 표시하는 것입니다.

예:

<style type="text/css">
		body{
			color: pink;
		}
		#father{
			color: red;
		}
		#grandfather{
			color: blue;
		}
	</style>
</head>
<body>
	<div id="grandfather">
		<div id="father">
			<div>
				<h1 id="继承冲突">继承冲突</h1>
			</div>
		</div>
	</div>

렌더링은 다음과 같습니다.

CSS 계단식 스타일을 이해하는 방법

(3) 지정된 스타일 충돌

때때로 요소에 스타일을 할당할 때 가중치가 다르기 때문에 충돌이 발생할 수 있습니다. 가중치가 동일한 경우에만 "마지막 먼저" 원칙이 사용된다는 점에 유의해야 합니다.

<style type="text/css">
		body{
			color:black;
		}
		.father{
			color:yellow;
		}
		#son{
			color:green;
		}
	</style>
</head>
<body>
	<div id="son" class="father">
		<h1 id="继承冲突">继承冲突</h1>
	</div>
</body>

렌더링은 다음과 같습니다.

Image 080.png