Qual é a diferença entre * e * | * em CSS?


Respostas:


215

Conforme as especificações do seletor W3C :

O seletor universal permite um componente opcional de espaço para nome. É usado da seguinte maneira:

ns|*
todos os elementos no namespace ns

*|*
todos os elementos

|*
todos os elementos sem um espaço para nome

*
se nenhum espaço de nomes padrão foi especificado, isso é equivalente a * | *. Caso contrário, é equivalente a ns | * onde ns é o espaço para nome padrão.

Então, não *e *|*nem sempre são os mesmos. Se um espaço de nome padrão for fornecido, *selecione apenas os elementos que fazem parte desse espaço de nome.


Você pode ver visualmente as diferenças usando os dois trechos abaixo. No primeiro, um espaço para nome padrão é definido e, portanto, o *seletor aplica o plano de fundo bege somente ao elemento que faz parte desse espaço para nome, enquanto o *|*aplica a borda a todos os elementos.

@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>

No abaixo trecho sem namespace padrão é definido e assim ambos *e *|*se aplica a todos os elementos e assim todos eles obter tanto o fundo bege ea borda preta. Em outras palavras, eles funcionam da mesma maneira quando nenhum espaço para nome padrão é especificado.

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


Como aponta BoltClock nos comentários ( 1 , 2 ), inicialmente namespaces aplicada apenas a linguagens baseadas em XML, como XHTML, SVG etc, mas de acordo com as especificações mais recentes, todos os elementos HTML (isto é, elementos no namespace HTML) são namespaced para http://www.w3.org/1999/xhtml. O Firefox segue esse comportamento e é consistente em todos os agentes de usuário HTML5. Você pode encontrar mais informações nesta resposta .


4
Os namespaces se aplicam apenas ao XHTML ou ao HTML também?
Flimm

8
@ Limlim: Somente linguagens baseadas em XML, como XHTML e SVG. Mas observe que alguns navegadores, como o Firefox (não têm certeza sobre outros), aplicam o espaço para nome XHTML, mesmo em text / html, para fins de CSS. Veja por exemplo jsfiddle.net/BoltClock/5ta6yvvc e, para obter mais informações, responda .
BoltClock

3
Adendo - o comportamento do Firefox é por especificação e é consistente em todos os agentes de usuário HTML5. Todos os elementos HTML (ou seja, elementos no espaço para nome HTML ) estão com namespacehttp://www.w3.org/1999/xhtml
BoltClock

44

*|*representa o seletor de "todos os elementos em qualquer espaço para nome". De acordo com o W3C , o seletor é dividido em:

ns | E

Onde ns é o espaço para nome e E é o elemento. Por padrão, nenhum espaço para nome é declarado. Portanto, a menos que um espaço para nome seja declarado explicitamente *|*e *selecione os mesmos elementos.


-3

Em CSS, * corresponderá a qualquer elemento.

| é usado para corresponder a selecionar elementos específicos . Ambos são seletores usados ​​para nosso propósito de teste


2
você pode dar um exemplo?
Ben Leggiero
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.