В чем разница между * и * | * в 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 ), изначально пространства имен применялись только к языкам на основе XML, таким как XHTML, SVG и т. Д., Но согласно последним спецификациям все элементы HTML (то есть элементы в пространстве имен HTML) располагаются в пространстве имен http://www.w3.org/1999/xhtml. Firefox следует этому поведению, и он одинаков для всех пользовательских агентов HTML5. Вы можете найти больше информации в этом ответе .

*|*представляет селектор «всех элементов в любом пространстве имен». Согласно W3C , селектор делится на:

нс | E

Где ns - пространство имен, а E - элемент. По умолчанию пространства имен не объявляются. Так что, если пространство имен не объявлено явно, *|*и *выберет те же элементы.

В CSS * будет соответствовать любому элементу.

| используется для соответствия выбранным конкретным элементам . Оба селектора используются для нашего тестирования