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

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

---

이 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>

---

이는 와일드 카드이며 이는 DOM의 해당 부분 내의 모든 요소를 ​​선택 함을 의미합니다.

예를 들어 전체 페이지의 모든 요소에 여백을 적용하려면 다음을 사용할 수 있습니다.

* {
    margin: 10px;
}

하위 선택 내에서도이를 사용할 수 있습니다. 예를 들어 다음은 단락 태그 내의 모든 요소에 여백을 추가합니다.

p * {
    margin: 10px;
}

귀하의 예제는 여러 색상의 테두리를 제공하기 위해 연속 테두리와 여백을 요소에 적용하는 CSS 트릭을 수행하는 것입니다. 예를 들어 검은 색 테두리로 둘러싸인 흰색 테두리입니다.

---

참조한 CSS는 페이지 레이아웃 문제를 디버깅하는 웹 디자이너에게 매우 유용합니다. 모든 페이지 요소의 크기를 확인하고 예를 들어 다른 요소를 제자리에서 벗어나게 만드는 패딩이 너무 많은 요소를 추적 할 수 있도록 페이지에 임시로 드롭하는 경우가 많습니다.

동일한 트릭을 첫 번째 줄로만 수행 할 수 있지만 여러 윤곽선을 정의하는 이점은 테두리 색상을 통해 중첩 된 페이지 요소의 계층 구조에 대한 시각적 단서를 얻을 수 있다는 것입니다.

---

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

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

---

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

당신이 할 경우 :

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

그러면 모든 HTML 요소가 해당 스타일을 갖게됩니다.

---

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

참고 URL : https://stackoverflow.com/questions/1204275/what-does-an-asterisk-do-in-a-css-selector