CSS에서 *와 * | *의 차이점은 무엇입니까?

CSS에서는 *모든 요소와 일치합니다.

모든 요소를 ​​일치시키는 *|*대신 자주 사용됩니다 *. 이것은 일반적으로 테스트 목적으로 사용됩니다.

차이 무엇 *과 *|*CSS의는?

당으로 W3C 선택기 사양 :

범용 선택기는 선택적 네임 스페이스 구성 요소를 허용합니다. 다음과 같이 사용됩니다.

ns|*
네임 스페이스 ns의 모든 요소

*|*
모든 요소

|*
네임 스페이스가없는 모든 요소

*
기본 네임 스페이스가 지정되지 않은 경우 * | *와 같습니다. 그렇지 않으면 ns | *와 같습니다. 여기서 ns는 기본 네임 스페이스입니다.

따라서 아니요 *, *|*항상 같은 것은 아닙니다. 기본 네임 스페이스가 제공 *되면 해당 네임 스페이스의 일부인 요소 만 선택합니다.

아래 두 스 니펫을 사용하여 차이점을 시각적으로 볼 수 있습니다. 첫 번째로 기본 네임 스페이스가 정의되므로 *선택기는 베이지 색 배경을 해당 이름의 일부인 요소에만 *|*적용하는 반면 테두리는 모든 요소에 적용됩니다.

@namespace "http://www.w3.org/2000/svg";

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

아래에는 기본 네임 스페이스가 정의되어 있지 둘 수 있도록되어 니펫을 *하고 *|*모든 요소에 적용하고 모든 있도록 베이지 색 배경과 검은 색 테두리를 모두 얻을. 즉, 기본 네임 스페이스가 지정되지 않은 경우 동일한 방식으로 작동합니다.

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

BoltClock이 주석 ( 1 , 2 ) 에서 지적한 것처럼 처음에 네임 스페이스는 XHTML, SVG 등과 같은 XML 기반 언어에만 적용되지만 최신 사양에 따라 모든 HTML 요소 (즉, HTML 네임 스페이스의 요소)는 네임 스페이스 http://www.w3.org/1999/xhtml입니다. Firefox는이 동작을 따르며 모든 HTML5 사용자 에이전트에서 일관됩니다. 이 답변 에서 자세한 정보를 찾을 수 있습니다 .

*|*"임의 네임 스페이스의 모든 요소"선택기를 나타냅니다. W3C 에 따르면 선택기는 다음과 같이 나뉩니다.

ns | E

여기서 ns는 네임 스페이스 이고 E는 요소입니다. 기본적으로 네임 스페이스는 선언되지 않습니다. 네임 스페이스가 명시 적으로 선언되고,하지 않는 한 지금 *|*과 *같은 요소를 선택합니다.

CSS에서 *는 모든 요소와 일치합니다.

| 특정 요소를 선택하는 데 사용됩니다 . 둘 다 테스트 목적으로 사용되는 선택기입니다.