В чем разница между * и *

211

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

Часто *|*используется вместо* соответствия всем элементам. Это обычно используется в целях тестирования.

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

css css-selectors namespaces

— RockPaperLizard
источник

1

Подобный вопрос: что *|*значит в CSS?

— Flimm

216

Согласно спецификации селектора 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. Вы можете найти больше информации в этом ответе .

— Гарри
источник

4

Применяются ли пространства имен только к XHTML или HTML?

— Flimm

8

@Flimm: только языки на основе XML, такие как XHTML и SVG. Но обратите внимание, что некоторые браузеры, такие как Firefox (не уверены в других), применяют пространство имен XHTML даже в text / html для целей CSS. См. Например, jsfiddle.net/BoltClock/5ta6yvvc , и для получения дополнительной информации этот ответ .

— BoltClock

3

Приложение - Поведение Firefox является специфическим и согласованным для всех пользовательских агентов HTML5. Все элементы HTML (то есть элементы в пространстве имен HTML ) располагаются в пространстве именhttp://www.w3.org/1999/xhtml

— BoltClock

44

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

нс | E

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

— Даниэль Игуерас
источник

-3

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

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

— KR Раджа
источник

2

Можете ли вы привести пример?

— Бен Легжеро

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