В чем разница между * и * | * в CSS?

Ответ 1

По Спецификация W3C Selector:

Универсальный селектор позволяет использовать дополнительный компонент пространства имен. Он используется следующим образом:

ns|*
все элементы в пространстве имен ns

*|*
все элементы

|*
все элементы без пространства имен

*
если не указано пространство имен по умолчанию, это эквивалентно * | *. В противном случае это эквивалентно ns | *, где ns - пространство имен по умолчанию.

Итак, no * и *|* не всегда одинаковы. Если предоставляется пространство имен по умолчанию, то * выбирает только те элементы, которые являются частью этого пространства имен.

Вы можете визуально видеть различия, используя нижеприведенные два фрагмента. В первом определяется пространство имен по умолчанию и поэтому селектор * применяет бежевый цветный фон только к элементу, который является частью этого namsepace, тогда как *|* применяет границу ко всем элементам.

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

Ответ 2

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

нс | E

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

Ответ 3

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

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