* * CSS 선택기는 무엇을합니까?

97

최근에 나는 우연히 * *에 CSS .

*CSS 스타일 시트 의 단일 사용에 대해 Internet 및 Stack Overflow는 예제로 가득 차 있지만 * *CSS에서 두 개의 기호를 사용하는 것에 대해 확신하지 못합니다 .

나는 그것을 검색했지만 단일 *요소가 모든 요소를 선택하기 때문에 이것에 대한 관련 정보를 찾을 수 없었지만 사이트에서 두 번 사용한 이유를 모르겠습니다. 이것에 대해 빠진 부분은 무엇이며 왜이 핵이 사용됩니까 (해킹 인 경우)?

html css css-selectors

— 스왑 네쉬
소스

138

다른 때와 마찬가지로 두 개의 선택기를 차례로 배치하면 (예 li a:) 하위 조합 자를 얻습니다. * *다른 요소의 하위 요소 인 요소, 즉 전체 문서의 루트 요소 가 아닌 요소도 마찬가지 입니다 .

— Hobbs
소스

reply..this 들으 내가가 생각하지만 반드시 그렇게 빨리 일을 받아 들일 community..will에서 물어 생각했던 것입니다

— swapnesh

1

한 가지 더 물어볼 것이 있습니다. * *를 사용하는 것이 정말로 관련이 있습니까? :( 실제적인 관점에서 점점 내가 개념을 이해하지만, 같은 아니지만

— swapnesh

2

@swapnesh 브라우저 해킹처럼 보입니다. 있다 * { font-size: XXX }규칙과 * * { font-size: YYY }규칙. 그중 하나는 대부분의 브라우저에 적용되고 다른 하나는 특정 버그가있는 브라우저에 적용되지만 세부 사항을 알아낼 인내심은 없습니다. * html이전 IE를 탐지하는 데 일반적으로 사용되던 해킹 과 유사합니다 .

— hobbs 2013 년

comments..it에서 마지막 세부 블록을 추가하는 THX는 :) 들으을 위해 많은 : 더 뇌 스토밍을 할 필요 one..no 거의 완벽

— swapnesh

10

의 방식으로 그주의 * html, * * 할 IE6에서 HTML 요소를 일치합니다.

— Alohci 2013 년

80

약간의 큰 예 :

귀하의 사이트에 다음을 추가하십시오.

* { 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; }

데모 : http://jsfiddle.net/l2aelba/sFSad/

예 2 :

데모 : http://jsfiddle.net/l2aelba/sFSad/34/

— l2aelba
소스

7

이것은 엄밀히 말해 대답은 아니지만 정말 멋진 시각화입니다!

— aboy021 2013

1

@ l2aelba 정말 설명 : 하나의 멋진 조각

— swapnesh

33

* *최상위 요소를 제외한 모든 항목 (예 : html.

— Frambot
소스

감사합니다 Joe, 여기 에서 테스트하고 위의 의견에 따라 : * *선택기는 html *이전의 좋은 IE6을 제외한 모든 브라우저에 대해 동일합니다. :-)

— Stano

@Stano * *는 html *HTML 파일 의 ... 와 같습니다 . 그러나 CSS는 다른 종류의 문서 (특히 SVG)의 스타일을 지정하는 데 사용될 수 있습니다.

— Sylvain Leroux

11

* 모든 요소에 주어진 스타일을 적용하는 것을 의미합니다.

* *모든 요소의 자식 요소에 주어진 스타일을 적용하는 것을 의미합니다. 예:

body > * {
  margin: 0;
}

이것은 body의 모든 자식 요소에 여백 스타일을 적용합니다. 같은 길,

* * {
  margin: 0;
}

적용 margin: 0에 *의 자식 요소. 즉, margin: 0거의 모든 요소에 적용됩니다 .

일반적으로 하나 *이면 충분합니다. 두 가지 필요가 없습니다 * *.

— CrazyFellow
소스

2

설명을위한 thx +1 .. 마지막 줄에서 방금 언급 한 내용이 확실하지 않지만 "일반적으로 *는 충분합니다. * *는 필요 없습니다. 나는 추측합니다."

— swapnesh 2013 년

3

* *스타일을 자식 요소가 아닌 하위 요소에 적용합니다 . 하위 요소는 >공간이 아니라 귀하의 예와 같습니다. 자손과 자식은 같은 것이 아닙니다.

— BoltClock

7

이는 요소 내부 어딘가에 중첩 된 div a모든 <a>요소를 선택 하는 것과 거의 같은 방식으로 다른 요소 내에 중첩 된 모든 요소를 선택합니다 <div>.

— 마이크 브랜트
소스