Разделитель именных пространств

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Разделитель именных пространств (|) отделяет селектор от имени пространства имён, определяя имя пространства имён или его отсутствие для селектора типа.

/* Links in the namespace named myNameSpace */
myNameSpace|a {
  font-weight: bold;
}
/* paragraphs in any namespace (including no namespace) */
*|p {
  color: darkblue;
}
/* heading level 2 not in a namespace */
|h2 {
  margin-bottom: 0;
}

Селекторы типов и универсальный селектор допускают необязательную компоненту имени пространства имён. Когда имя пространства имён было предварительно объявлено с помощью @namespace, эти селекторы могут быть привязаны к имени пространства имён путём добавления имени пространства имён перед селектором, разделённого разделителем именных пространств (|). Это полезно при работе с документами, содержащими несколько имен пространств, такими как HTML с встроенным SVG или MathML, или XML, в котором смешаны несколько словарей.

ns|h1 - соответствует элементам <h1> в пространстве имён ns
*|h1 - соответствует всем элементам <h1>
|h1 - соответствует всем элементам <h1> вне любого объявленного или подразумеваемого имени пространства имён

Синтаксис

namespace|element { style properties }

Примеры

По умолчанию все элементы в HTML или SVG-элементе имеют имя пространства имён, так как http://www.w3.org/1999/xhtml и http://www.w3.org/2000/svg подразумеваются. Метод document.createElementNS с пустой строкой в качестве параметра имени пространства имён можно использовать для создания элементов без имени пространства имён.

Пример с именем пространства имён

В этом примере все элементы находятся в пространстве имён.

HTML

В HTML или SVG явно не объявлены пространства имён.

<p>This paragraph <a href="#">has a link</a>.</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">Link created in SVG</text>
  </a>
</svg>

CSS

В CSS объявлены два имени пространства имён, затем стили присваиваются ссылкам глобально (a), ссылкам без имени пространства имён (|a), ссылкам в любом пространстве имён или без него (*|a), а затем двум различным именованным пространствам имён (svgNamespace|a и htmlNameSpace|a).

@namespace svgNamespace url("http://www.w3.org/2000/svg");
@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml");
/* All `<a>`s in the default namespace, in this case, all `<a>`s */
a {
  font-size: 1.4rem;
}
/* no namespace */
|a {
  text-decoration: wavy overline lime;
  font-weight: bold;
}
/* all namespaces (including no namespace) */
*|a {
  color: red;
  fill: red;
  font-style: italic;
}
/* only the svgNamespace namespace, which is <svg> content */
svgNamespace|a {
  color: green;
  fill: green;
}
/* The htmlNameSpace namespace, which is the HTML document */
htmlNameSpace|a {
  text-decoration-line: line-through;
}

Результат

Селектор |a, ссылка, не относящаяся к пространству имён, не соответствует никаким ссылкам. В HTML подразумевается http://www.w3.org/1999/xhtml, что означает, что весь HTML находится в пространстве имён, даже если оно не объявлено явно. В SVG, даже если оно не задано явно, подразумевается пространство имён http://www.w3.org/2000/svg. Это означает, что всё содержимое находится как минимум в одном пространстве имён.

Пространство имён по умолчанию и отсутствие имени пространства имён

В этом примере мы используем JavaScript для создания элемента без имени пространства имён и добавления его в документ. Мы устанавливаем пространство имён SVG в качестве пространства имён по умолчанию, определяя неопределённое пространство имён с помощью @namespace.

Примечание: Если определено пространство имён по умолчанию или без имени, универсальные и селекторы типов применяются только к элементам в этом пространстве имён.

HTML

В HTML или SVG явно не объявлены пространства имён.

<p><a href="#">A link</a> in the implied HTML namespace.</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">Link created in SVG namespace</text>
  </a>
</svg>

JavaScript

С помощью JavaScript, с помощью document.createElementNS, мы создаём ссылку якоря без имени пространства имён, а затем добавляем ссылку.

// create 'no namespace' anchor
const a = document.createElementNS("", "a");
a.href = "#";
a.appendChild(document.createTextNode("Link created without a namespace"));

document.body.appendChild(a);

CSS

Мы объявляем пространство имён с помощью @namespace. Опуская имя пространства имён, объявление @namespace создаёт пространство имён по умолчанию.

/* By omitting a name, this sets SVG as the default namespace */
@namespace url("http://www.w3.org/2000/svg");

/* `<a>` in the default (set to SVG) namespace */
a {
  font-size: 1.4rem;
}

/* `<svg>` and `<p>` in the default (set to SVG) namespace */
svg,
p {
  border: 5px solid gold;
}

/* links outside of any namespace */
|a {
  text-decoration: wavy underline purple;
  font-weight: bold;
}

/* links with any namespace or no namespace */
*|a {
  font-style: italic;
  color: magenta;
  fill: magenta;
}

Результат

Селектор без разделителя именных пространств, a, соответствовал только элементам SVG <a>, так как SVG был установлен в качестве пространства имён по умолчанию.

Селектор без имени пространства имён, |a, соответствовал элементу JavaScript, определённому и добавленному <a>, так как этот узел — единственный узел, у которого нет имени пространства имён по умолчанию.

Спецификации

Спецификация
CSS Namespaces Модуль 3 # declaration

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`Namespace_separator`	1	12	1	8	3	18	4	14	1	1.0	37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Namespace_separator