Яка різниця між * та *

211

У CSS *буде відповідати будь-якому елементу.

Часто *|*використовується замість того, *щоб відповідати всім елементам. Зазвичай це використовується для тестування.

Яка різниця між *і *|*в CSS?

css css-selectors namespaces

— RockPaperLizard
джерело

1

Подібне запитання: Що *|*означає CSS?

— Flimm

215

Відповідно до специфікації вибору 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>

Розгорніть фрагмент

Як в коментарях ( 1 , 2 ) зазначає BoltClock , спочатку простори імен застосовуються лише до мов на основі XML, таких як XHTML, SVG тощо, але відповідно до останніх специфікацій, всі елементи HTML (тобто елементи в просторі імен HTML) мають простір імен http://www.w3.org/1999/xhtml. Firefox дотримується такої поведінки, і він узгоджується з усіма користувачами HTML5-агентами. Ви можете знайти більше інформації в цій відповіді .

— Гаррі
джерело

4

Чи застосовуються простори імен лише до XHTML або до HTML?

— Flimm

8

@Flimm: Лише мови на основі XML, наприклад XHTML та SVG. Але зауважте, що деякі браузери, такі як Firefox (не впевнені в інших), застосовують простір імен XHTML навіть у тексті / html для цілей CSS. Дивіться, наприклад, jsfiddle.net/BoltClock/5ta6yvvc , а для отримання додаткової інформації цю відповідь .

— BoltClock

3

Додаток - Поведінка Firefox є специфікою та узгоджується з усіма користувацькими агентами HTML5. Усі елементи HTML (тобто елементи в просторі імен HTML ) розміщені в просторі іменhttp://www.w3.org/1999/xhtml

— BoltClock

44

*|*представляє селектор "всіх елементів у будь-якому просторі імен". За даними W3C , селектор поділяється на:

нс | Е

Де ns - це область імен, а E - елемент. За замовчуванням не оголошуються простори імен. Тож, якщо простір імен явно не оголошено, *|*і *вибере ті самі елементи.

— Даніель Ігуерас
джерело

-3

У CSS * відповідатиме будь-якому елементу.

| використовується для узгодження вибору конкретних елементів . Обидва є селектором, який використовується для нашої тестування

— KR Raja
джерело

2

Чи можете ви навести приклад?

— Ben Leggiero

Яка різниця між * та * | * у CSS?