CSS의 스타일 우선순위 이해: CSS 스타일 우선순위 설명

이 글에서는 CSS 스타일 우선순위를 소개하고 CSS 스타일 우선순위에 대한 심층적인 이해를 제공합니다.

요소에 CSS 스타일을 적용하려고 했지만 효과가 없었던 상황에 처해본 적이 있나요? 페이지에서는 정의한 CSS를 무시하는 것 같지만 이유를 파악하지 못할 수도 있습니다. 아마도 그럴 것입니다! 중요하거나 최후의 수단으로 인라인 스타일을 추가하세요. 그러나 실제로 당신이 겪고 있는 문제는 아마도 CSS 우선순위 중 하나일 것입니다. (추천과정: css 동영상 튜토리얼)

어떤 CSS 스타일을 먼저 사용해야 하는지 잘 이해하면 CSS 코드 작성이 더 명확하고 체계적으로 이루어질 수 있으니 살펴보겠습니다. 주어진 HTML 요소를 제어하는 ​​CSS 규칙:

css 우선 순위 계산

cssinheritance

css Cascading #🎜🎜 #

우선순위 계산

p { font-size ：12px }
p.bio { font-size ：14px }

<div id = “sidebar” >
<p class = “bio” >文字在这里</ p>
</ div>

div p.bio { font-size ：14px }
#sidebar p { font-size ：12px }

#🎜 🎜##sidebar: 1개의 ID - (0,1,0,0)

div #sidebar: 1개의 요소, 1개의 ID - (0,1,0,1)# 🎜🎜##🎜 🎜#div #sidebar p: 요소 2개, ID 1개 - (0,1,0,2)

div #sidebar p.bio: 요소 2개, 클래스 1개, ID 1개 - (0,1 ,1,2)

위의 예를 다시 살펴보겠습니다

div p.bio { font-size ：14px }  - （0,0,1,2）
#sidebar p { font-size ：12px }  - （0,1,0,1）

두 번째가 우선순위가 높으므로 우선순위를 지정하세요.

앞으로 나아가기 전 마지막 사항입니다. 그것을 사용할 때 중요성이 우선순위보다 우선합니다! CSS 속성을 중요하게 표시하면 우선순위 규칙을 무시하는 등

div p.bio { font-size ：14px ！important }    
#sidebar p { font-size ：12px }

은 위 CSS의 첫 번째 줄이 두 번째 줄이 아닌 두 번째 줄보다 우선한다는 의미입니다. ! 중요한 것은 규칙이 어떻게 작동하는지 이해한다면 절대 필요하지 않은 기본 규칙을 둘러싼 특수성입니다. 상속의 개념은 비교적 이해하기 쉽습니다. 요소는 상위 컨테이너로부터 스타일을 상속받습니다. body 태그가 color:red를 사용하도록 설정된 경우 달리 지정하지 않는 한 본문의 모든 요소 텍스트도 빨간색이 됩니다.

그러나 모든 CSS 속성이 상속되는 것은 아닙니다. 예를 들어 여백과 안쪽 여백은 상속되지 않는 속성입니다. div에 여백이나 패딩을 설정하면 div 내부의 단락은 div에 설정한 여백과 패딩을 상속하지 않습니다. 단락은 달리 선언할 때까지 기본 브라우저 여백과 패딩을 사용합니다.

그러나 상위 컨테이너에서 스타일을 상속하도록 속성을 명시적으로 설정할 수 있습니다. 예를 들어

p { margin ：inherit ; 填充：继承 }

을 선언하면 단락이 포함된 요소에서 상속됩니다.
Cascading

최고 수준에서 계단식은 모든 CSS 우선순위를 제어하고 다음과 같이 작동합니다.

1 관련 요소 및 속성에 적용되는 모든 CSS 선언을 찾습니다.

2. 원산지 및 중량별로 정렬합니다. Origin은 선언의 소스(작성자 스타일, 사용자 스타일, 브라우저 기본값)를 나타내고 가중치는 선언의 중요성을 나타냅니다. (작성자의 가중치가 기본값보다 큽니다.! important가 일반 선언보다 중요합니다.)

3. 계산 우선순위 4. 위 규칙 중 두 개 두 규칙이 동일하면 마지막 규칙이 승리합니다. html에 포함된 CSS는 html의 순서에 관계없이 항상 외부 스타일시트 뒤에 옵니다. 위의

요약

위 내용이 CSS 우선순위 문제를 명확히 하는 데 도움이 되기를 바랍니다. 대부분의 경우 스타일이 충돌하면 문제는 우선순위로 귀결됩니다. 일부 CSS를 선언하지 않았지만 요소가 부모 컨테이너나 브라우저의 기본 스타일에서 일부 CSS를 상속했을 수 있다고 예상하지 못한 방식으로 동작하는 경우도 있습니다.

CSS를 선언할 때 일반적인 경험 법칙은 요소의 스타일을 지정하기 위해 우선순위가 가장 낮은 속성을 선언하는 것입니다. 예를 들어 div#sidebar 대신 #sidebar를 사용하세요. 나는 이 일반 규칙을 내가 해야 할 것보다 훨씬 더 많이 어겼다는 것을 인정하지만, 최소한의 필수 우선 순위를 사용하면 보다 구체적인 스타일을 선언하여 스타일을 재정의하는 것이 더 쉬워질 것입니다.

가장 높은 우선순위를 사용하면 나중에 문제가 발생할 수 있으며 더 많은 우선순위를 추가하기 위해 불필요한 HTML을 추가해야 하거나 를 사용하지 않을 수도 있습니다! 중요하거나 스타일을 인라인으로 선언하세요. 가장 작은 우선순위부터 시작하고 필요할 때만 더 추가하세요.

위 내용은 CSS의 스타일 우선순위 이해: CSS 스타일 우선순위 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!