이 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;
}
또한 모든 여백을 추가 예를 들어, 하위 선택에서 다음이 사용할 수 있습니다 단락 태그 내 요소 : 귀하의 예를 그들에게 여러 색깔의 국경을주는 요소에 연속 테두리와 여백을 적용하는 일부 CSS는 속임수를하고있다
p * {
margin: 10px;
}
. 예를 들어 검은 색 테두리로 둘러싸인 흰색 테두리.
'p'를 사용하는 것과는 대조적으로'p *'를 사용하면 어떤 이점이 있습니까? –
"이점"이 없다. 단지'p' 태그 안에 모든 하위 요소를 선택하는 방법이다. 따라서 문단 안에'span','b','strong','img' 등이 있으면 그것을 선택하여 스타일을 적용 할 것입니다. – Soviut
*는 와일드 카드입니다. 이는 HTML 요소에 스타일을 적용한다는 것을 의미합니다. 추가 *는 해당 중첩 수준에 스타일을 적용합니다.
이 선택기는 요소의 중첩 수준에 따라 페이지의 모든 요소에 다른 색의 윤곽선을 적용합니다.
*은 대부분의 다른 인스턴스와 마찬가지로 와일드 카드로 작동합니다.
당신이 할 경우
*{
margin: 0px;
padding: 0px;
border: 1px solid red;
}
참조한 CSS는 페이지 레이아웃 문제를 디버깅하는 웹 디자이너에게 매우 유용합니다. 나는 종종 페이지에 그것을 놓아서 모든 페이지 요소의 크기를 볼 수 있으며, 예를 들어, 너무 많은 패딩이있는 요소는 다른 요소를 바꿔 놓을 수 있습니다.
첫 번째 줄만 사용하면 동일한 트릭을 수행 할 수 있지만 여러 개요를 정의 할 경우 테두리 색을 통해 중첩 페이지 요소의 계층 구조에 대한 시각적 단서를 얻을 수 있습니다.
매우 흥미 롭습니다. –
요즘에는 검사관이 만든 브라우저가 훨씬 더 효과적일까요? 또는 방화범을 사용하십시오. –
@ SoftwareMonkey - 예, 요즘 사실입니다. 빌트 인 검사원은 훌륭합니다. 예를 들어 Chrome을 사용하고 'Ctrl + Shift + c'를 눌러 요소 위로 마우스를 이동하면 Chrome이 배경을 색칠합니다. 이 별표 스타일을 CSS에 떨어 뜨리는 것보다 훨씬 빠릅니다. – Tom
여러분의 스타일 시트에서 일반적으로 글꼴 크기 속성과 여백과 같은 모든 요소에 대한 기본 규칙을 정의해야합니다. {font-size : 14px; 여백 : 0; 패딩 : 0;} / 브라우저에서 요소의 기본 설정을 덮어 쓰면 모든 텍스트 글꼴 크기는 h1, ... pre를 포함하여 여백이없고 여백이없는 14 픽셀 크기로 렌더링됩니다. */
재미있게하기 위해 @jasondavis가 있지만 별표는 철자가 있습니다. 내가 어떻게 기억하는지 알아? 네이선 헤일 (Nathan Hale)은 자신의 나라에 대해이 중 하나만 갖고 있다는 것을 유감스럽게 생각한다고 말했다. :-) 알 겠어? 누군가? 누군가? 뷰어? – Rap
흥미 롭습니다 ... 전에 중첩 된 "*"을 본 적이 없습니다. 나는 이것이 단지 무지개 색깔의 경계선을 만들 것이라고 생각한다. =) –
Asterix는 그것을 생각해내는 아주 좋아하는 만화 캐릭터이다. – futureelite7