이 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 트릭을 수행하는 것입니다. 예를 들어 검은 색 테두리로 둘러싸인 흰색 테두리입니다.
p *그냥 사용 하는 것보다 사용하는 것의 장점은 무엇입니까 p?
p태그 내의 모든 하위 요소를 선택하는 방법 입니다. 당신이 있었다면 그래서 span, b, strong, img당신의 단락 내부 등, 그것은 사람들을 선택하고 그들에게 스타일을 적용 할 것입니다.
참조한 CSS는 페이지 레이아웃 문제를 디버깅하는 웹 디자이너에게 매우 유용합니다. 모든 페이지 요소의 크기를 확인하고 예를 들어 다른 요소를 제자리에서 벗어나게 만드는 패딩이 너무 많은 요소를 추적 할 수 있도록 페이지에 임시로 드롭하는 경우가 많습니다.
동일한 트릭을 첫 번째 줄로만 수행 할 수 있지만 여러 윤곽선을 정의하는 이점은 테두리 색상을 통해 중첩 된 페이지 요소의 계층 구조에 대한 시각적 단서를 얻을 수 있다는 것입니다.
Ctrl+Shift+c하고 요소 위로 마우스를 가져 가면 Chrome이 배경을 채색합니다. 이 별표 스타일을 CSS에 넣는 것보다 훨씬 빠릅니다.
* 대부분의 다른 인스턴스와 마찬가지로 와일드 카드로 작동합니다.
당신이 할 경우 :
*{
margin: 0px;
padding: 0px;
border: 1px solid red;
}그러면 모든 HTML 요소가 해당 스타일을 갖게됩니다.
스타일 시트에서 일반적으로 글꼴 크기 속성 및 여백과 같은 모든 요소에 대한 기본 규칙을 정의해야합니다. {font-size : 14px; 여백 : 0; padding : 0;} / 요소에 대한 브라우저의 기본 설정을 덮어 쓰면 모든 텍스트 글꼴 크기는 여백이 0이고 패딩이없는 14 픽셀 크기로 렌더링됩니다 (h1, ... pre 포함). * /
div * { outline ...}및* { outline ... }. 내가 사용하는 경우* { outline ... }와* * { outline ... }마지막 CSS 기술이 사용됩니다.