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

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/xhtmlFirefox는 이 동작을 따르며 모든 HTML5 사용자 에이전트에서 일관됩니다.이 답변에서 더 많은 정보를 찾을 수 있습니다.

*|*모든 네임스페이스의 모든 요소 선택기를 나타냅니다.W3C에 따라 셀렉터는 다음과 같이 구분됩니다.

ns|E

여기서 ns는 네임스페이스이고 E는 요소입니다.기본적으로 네임스페이스는 선언되지 않습니다.네임스페이스가 명시적으로 선언되지 않는 한*|*그리고.*에서는 동일한 요소를 선택합니다.

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

선택한 특정 요소를 일치시키는 데 사용됩니다.둘 다 테스트 목적으로 사용되는 셀렉터입니다.

언급URL : https://stackoverflow.com/questions/34987370/what-is-the-difference-between-and-in-css