별표 기호 (*)로 표시된 범용 선택기는 문서 내의 모든 요소와 일치하는 CSS의 선택기입니다. 유형, 클래스 또는 ID에 관계없이 웹 페이지의 모든 요소에 스타일을 적용하는 와일드 카드입니다. 사용하면 다른 선택기와 결합하여 전 세계적으로 스타일을 적용하거나 전체 문서에서 특정 속성을 재설정 할 수 있습니다.
예를 들어, 다음 CSS 규칙은 페이지의 모든 요소에 대해 텍스트 색상을 파란색으로 설정합니다.
<code class="css">* { color: blue; }</code> 범용 선택기는보다 구체적인 선택기에서도 사용할 수 있습니다. 예를 들어, "컨테이너"클래스를 사용하여 <div> 내부의 모든 요소를 대상으로하려면 다음을 작성합니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">.container * { margin: 0; padding: 0; }</code></pre><div class="contentsignin">로그인 후 복사</div></div>
<p> 이 광범위한 적용 가능성은 CSS의 Universal Selector를 강력한 도구로 만들지 만 성능과 특이성에 미치는 영향으로 인해 신중하게 사용해야합니다.</p>
<h3> Universal Selector (*)는 CSS의 성능에 어떤 영향을 미칩니 까?</h3>
<p> Universal Selector (*)는 주로 브라우저가 CSS 규칙을 처리하고 적용하는 방식으로 인해 성능에 큰 영향을 줄 수 있습니다. 고려해야 할 핵심 사항은 다음과 같습니다.</p>
<ol>
<li> <strong>계산 오버 헤드 증가</strong> : 브라우저는 범용 선택기가 사용될 때 페이지의 모든 단일 요소를 확인해야합니다. 이는 브라우저가 지정된 스타일을 잠재적으로 수천 개의 요소에 적용해야하므로 페이지 렌더링 시간이 느려질 수 있습니다.</li>
<li> <strong>셀렉터 매칭</strong> : 범용 선택기와 일치하는 프로세스는 본질적으로보다 특정한 선택기를 사용하는 것보다 효율적입니다. 브라우저가 범용 선택기를 만나면 전체 DOM 트리를 가로 질러 렌더링에 필요한 시간을 증가시켜야합니다.</li>
<li> <strong>특이성 및 계단식에 대한 영향</strong> : 범용 선택기는 특이성이 매우 낮기 때문에보다 구체적인 선택기에 의해 상환 될 수 있습니다. 그러나 다른 선택기와 결합 할 때는 여전히 복잡한 특이성 체인에 기여하여 캐스케이드를 복잡하게하고 렌더링 엔진의 속도를 늦출 수 있습니다.</li>
<li> <strong>리플 로우 및 리 페인트</strong> : 모든 요소에 스타일을 적용하면 특히 스타일이 여백이나 패딩과 같은 레이아웃 속성에 영향을 미치는 경우 다중 리플 로우 및 리페인트를 유발할 수 있습니다. 이는 특히 모바일 장치 또는 이전 하드웨어에서 성능을 더욱 저하시킬 수 있습니다.</li>
</ol>
<p> 요약하면, 범용 선택기는 유용하지만 광범위한 응용 프로그램은 성능 문제로 이어질 수 있으므로 그 영향을 신중하게 고려하여이를 사용하는 것이 중요합니다.</p>
<h3> Universal Selector (*)를 사용하여 CSS에서 스타일을 재설정 할 수 있습니까? 그렇다면 어떻게해야합니까?</h3>
<p> 예, Universal Selector (*)는 CSS의 스타일을 재설정하는 데 효과적으로 사용될 수 있습니다. 스타일을 재설정하는 것은 다른 브라우저에서 일관된 렌더링을 보장하는 일반적인 관행이며, 종종 HTML 요소에 대한 자체 기본 스타일이 있습니다. Universal Selector를 사용하여 스타일을 재설정하는 방법은 다음과 같습니다.</p>
<ol>
<li>
<p> <strong>글로벌 리셋</strong> : 범용 선택기를 사용하여 모든 요소에 대한 특정 속성을 재설정 할 수 있습니다. 일반적인 예는 여백을 재설정하고 패딩을 0으로 재설정하는 것입니다.</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">* { margin: 0; padding: 0; }</code></pre><div class="contentsignin">로그인 후 복사</div></div>
</li>
<li>
<p> <strong>Box 모델 재설정</strong> : 범용 선택기를 사용하여 요소에서 상자 모델을 정상화 할 수도 있습니다.</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">* { box-sizing: border-box; }</code></pre><div class="contentsignin">로그인 후 복사</div></div>
</li>
<li>
<p> <strong>결합 된 재설정</strong> : Universal Selector와 다른 선택기를 결합하여 포괄적 인 재설정을 만들 수 있습니다. 예를 들어, 다음은 의사 요소를 포함한 모든 요소에 대한 스타일을 재설정합니다.</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }</code></pre><div class="contentsignin">로그인 후 복사</div></div>
</li>
<li> <strong>상속 및 특이성</strong> : 재설정 목적으로 범용 선택기를 사용할 때 CSS 상속 및 특이성을 염두에 두십시오. 일부 특성 ( <code>font-family 또는 color 과 같은)은 특정 요소 또는 불필요한 재정의를 피하기 위해 다른 수단을 통해 더 잘 재설정 될 수 있습니다.
이러한 방식으로 범용 선택기를 사용하면 스타일에 대한 깨끗한 슬레이트를 만들어 다양한 브라우저와 장치에서 일관되게 디자인을 쉽게 구현할 수 있습니다.
Universal Selector (*)에는 사용이 있지만 잠재적 인 단점으로 인해 피해야 할 특정 시나리오가 있습니다.
.container * .item .container .item 보다 덜 명확하고 계산적으로 비쌉니다.요약하면, 범용 선택기는 CSS의 강력한 도구이지만 특히 성능에 민감하거나 복잡한 환경에서 신중하게 고려해야합니다. 보다 구체적인 선택기는 종종 타겟 스타일링과 더 나은 성능을위한 더 나은 선택입니다.
위 내용은 CSS의 범용 선택기 (*)는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
