`html`, `body` 및 범용 선택기(*)의 CSS 선택기 우선 순위는 어떻게 다릅니까?

Barbara Streisand

풀어 주다： 2024-11-28 12:06:16

원래의

342명이 탐색했습니다.

How Do `html`, `body`, and the Universal Selector (*) Differ in CSS Selector Precedence?

CSS 선택기 우선순위: html, body 및 범용 선택기*(업데이트됨)

질문이 생깁니다. 동일한 HTML 문서에 적용됩니까? html, body 및 범용 선택기 *.

html 선택기:

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

로그인 후 복사

등 선택기의 독특한 효과를 살펴보겠습니다. }

이 규칙은 색상 및 배경 스타일을 요소. 해당 하위 항목은 색상을 상속하지만 요소. <본문> 요소에는 기본 배경이 없기 때문에 투명하게 되어

전체 뷰포트를 덮음에도 불구하고 요소의 배경은 높이를 자동으로 확장하지 않습니다. 단순히 뷰포트에 스며듭니다.

바디 선택기:

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

로그인 후 복사

}

이 규칙은 요소. 모든 하위 항목은 색상을 상속받습니다.

배경, 배경은 자동으로 명시적으로 재정의되지 않는 한 요소입니다. 따라서 단일 배경을 사용하는 경우 배경을 또는 요소는 큰 차이를 가져오지 않습니다.

그러나 및 여기에 설명된 대로 고유한 효과를 생성할 수 있습니다.

Universal Selector (*):

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

로그인 후 복사

}

이 규칙은 모든 요소에 영향을 미치며 암시적 상속을 무효화합니다. 하지만 및 규칙의 구체성이 부족하기 때문입니다.

유니버설 선택기로 상속을 중단하는 것은 영향을 받는 모든 속성에 대한 상속 체인을 방해할 가능성이 있기 때문에 절대적으로 필요한 경우(일반적으로 특정하고 격리된 요소의 경우)가 아니면 일반적으로 권장되지 않습니다.

위 내용은 `html`, `body` 및 범용 선택기(*)의 CSS 선택기 우선 순위는 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：CSS를 사용하여 2열 텍스트 레이아웃을 자동으로 생성하려면 어떻게 해야 합니까? 다음 기사：반응형 웹 디자인을 위한 최고의 CSS 미디어 쿼리 중단점은 무엇입니까?

본 웹사이트의 성명

저자별 최신 기사

에서 2024-04-29 11:01:01

2052

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?