CSS 선택기에서 별표 (*)는 무엇을합니까?

Question

이 CSS 코드를 발견하고 실행하여 페이지의 모든 요소를 ​​설명했습니다.

CSS에서 별표 (*)가 무엇을 설명 할 수 있습니까?

<style> 
* { outline: 2px dotted red } 
* * { outline: 2px dotted green } 
* * * { outline: 2px dotted orange } 
* * * * { outline: 2px dotted blue } 
* * * * * { outline: 1px solid red } 
* * * * * * { outline: 1px solid green } 
* * * * * * * { outline: 1px solid orange } 
* * * * * * * * { outline: 1px solid blue } 
</style> 

Answer 1

와일드 카드는 DOM의 해당 부분에있는 모든 요소를 ​​선택한다는 의미입니다. 내 전체 페이지에있는 모든 요소에 여백을 적용하려면

예를 들어, 당신은 사용할 수 있습니다

이

* { 
    margin: 10px; 
} 

또한 모든 여백을 추가 예를 들어, 하위 선택에서 다음이 사용할 수 있습니다 단락 태그 내 요소 : 귀하의 예를 그들에게 여러 색깔의 국경을주는 요소에 연속 테두리와 여백을 적용하는 일부 CSS는 속임수를하고있다

p * { 
    margin: 10px; 
} 

. 예를 들어 검은 색 테두리로 둘러싸인 흰색 테두리.

Answer 2

*는 와일드 카드입니다. 이는 HTML 요소에 스타일을 적용한다는 것을 의미합니다. 추가 *는 해당 중첩 수준에 스타일을 적용합니다.

이 선택기는 요소의 중첩 수준에 따라 페이지의 모든 요소에 다른 색의 윤곽선을 적용합니다.

Answer 3

*은 대부분의 다른 인스턴스와 마찬가지로 와일드 카드로 작동합니다.

당신이 할 경우

*{ 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid red; 
} 

그런 다음 모든 HTML 요소는 그 스타일이됩니다.

Answer 4

참조한 CSS는 페이지 레이아웃 문제를 디버깅하는 웹 디자이너에게 매우 유용합니다. 나는 종종 페이지에 그것을 놓아서 모든 페이지 요소의 크기를 볼 수 있으며, 예를 들어, 너무 많은 패딩이있는 요소는 다른 요소를 바꿔 놓을 수 있습니다.

첫 번째 줄만 사용하면 동일한 트릭을 수행 할 수 있지만 여러 개요를 정의 할 경우 테두리 색을 통해 중첩 페이지 요소의 계층 구조에 대한 시각적 단서를 얻을 수 있습니다.

Answer 5

여러분의 스타일 시트에서 일반적으로 글꼴 크기 속성과 여백과 같은 모든 요소에 대한 기본 규칙을 정의해야합니다. {font-size : 14px; 여백 : 0; 패딩 : 0;} / 브라우저에서 요소의 기본 설정을 덮어 쓰면 모든 텍스트 글꼴 크기는 h1, ... pre를 포함하여 여백이없고 여백이없는 14 픽셀 크기로 렌더링됩니다. */