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
'Programing' 카테고리의 다른 글
최고의 온라인 결제 처리 솔루션은 무엇입니까? (0) | 2020.08.30 |
---|---|
ViewData와 TempData의 차이점은 무엇입니까? (0) | 2020.08.30 |
정규식에서 슬래시 이스케이프 (0) | 2020.08.30 |
JAVA_HOME이 JDK 또는 JRE를 가리켜 야합니까? (0) | 2020.08.30 |
사용자가 그것에 초점을 맞추기 전에 TextInputLayout에 EditText 힌트가 표시되지 않음 (0) | 2020.08.30 |