CSS 특이성, 상속 및 계단식-CSS 튜토리얼-php.cn

CSS 특이성, 상속 및 계단식

黄舟

풀어 주다： 2016-12-17 13:29:16

원래의

1143명이 탐색했습니다.

1. 특이성 규칙

선택자의 특이성은 선택자 자체의 구성 요소에 따라 결정되며, 초기 값은 0, 0, 0, 0입니다.

1. 선택기의 각 ID에 0, 1, 0, 0을 추가합니다.

2 선택기의 각 클래스, 의사 클래스 및 속성 선택에 0을 추가합니다. 0, 1, 0;

3. 선택기의 각 요소 또는 의사 요소에 대해 0, 0, 0, 1을 추가합니다.

4. .

참고:

1. 0, 0, 1, 0은 0, 0, 0, 13보다 더 구체적입니다.

2. 와일드카드 *의 특수성은 0, 0, 0, 0입니다. 이는 결합 문자(예: h1+p의 "+")에는 특수성이 전혀 없습니다. 스타일에는 특별한 것이 없습니다.

다음 코드를 참조하세요.

<head> 
<style> 
*{ 
color:red; 
} 
body{ 
color:cyan; 
} 
</style> 
</head> 
<body> 
<p>Whatkindofcolorthisparawillbe?</p> 
</body>

로그인 후 복사

페이지는 다음과 같이 표시됩니다.

CSS 특이성, 상속 및 계단식

4. 인라인 스타일이 가장 높습니다. 특이성은 1,0,0,0입니다.

5. !important로 표시된 문장을 중요한 문장이라고 합니다. 특별한 특징은 없지만 중요하지 않은 문장과 별도로 고려해야 합니다.

구체적으로: 중요하지 않은 진술은 그룹으로 그룹화되고, 둘 사이의 충돌은 구체성을 사용하여 해결되며, 중요한 진술은 그룹으로 그룹화되고, 둘 사이의 충돌은 항상 중요한 진술보다 내부적으로 해결됩니다. 중요하지 않은 진술 진술이 우선합니다.

2. 상속

1. 상속에는 특별한 특성이 없습니다. 이를 기억하면 많은 문제를 이해하는 데 도움이 될 수 있습니다.

다음 코드를 참조하세요.

<head> 
<style> 
p{ 
color:red; 
} 
</style> 
</head> 
<body> 
<p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p> 
</body>

로그인 후 복사

페이지 효과:

CSS 특이성, 상속 및 계단식

빨간색으로 설정되었지만 요소의 색상은 파란색입니까?

이것은 요소가 상위 요소의 색상을 상속하지 않기 때문이 아니라(이전에는 그렇게 생각했기 때문에 죄송합니다.) 요소가

; 요소이지만 이 상속된 스타일은 전혀 특별하지 않습니다. 그러나 브라우저의 기본 스타일은 분명히 브라우저의 기본 스타일을 따릅니다. 기본 스타일.

2. CSS 상속 관련: 일반적으로 하위 요소만 상위 요소의 스타일을 상속할 수 있습니다. 즉, 스타일은 DOM에서 위쪽으로만 전달될 수 있고 아래쪽으로만 전달될 수 있지만 예외가 있습니다. 배경 스타일은 본문에 적용됩니다. 요소는 위쪽으로 전달될 수 있으며, html 요소에 전달되면 그에 따라 캔버스를 정의할 수 있습니다.

3. 계단식

스태킹 규칙:

1. 독자를 위한 중요 설명 > 작성자를 위한 중요 설명 > 독자를 위한 일반 설명 >

2. 가중치가 동일할 경우 특이도에 따라 정렬되며, 특이도가 높은 쪽이 승리합니다.

3.특징이 동일할 경우 스타일 시트의 순서에 따라 정렬하면 나중에 나타나는 것이 승리합니다.

그런데, 바로 이 규칙 때문에 LoVe-HA의 순서가 링크 스타일을 선언하는 데 사용됩니다(LoVe-HA는 link; :visited; :hover; :활동적인).

위 내용은 CSS 특이성, 상속성, 캐스케이딩 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!