代码之家 › 专栏 › 技术社区 › MaximPro

浏览器如何理解我们使用的名称空间?

namespaces html

MaximPro · 技术社区 · 7 年前

例子:

@namespace html "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";

html|a{ 
    text-decoration: underline;
    color: blue;
}
svg|a {
    stroke: red;
}

<a href="#">link</a>
<svg>
  <a href="#">
    <text y="21" x="60">link</text>
  </a>
</svg>

正如您所看到的,有两个链接,但是每个链接的规则是不同的,因为浏览器理解我指的是什么空间。那么浏览器如何理解我使用的名称空间呢?因为如果你写信 @namespace my "http://example.com" 它不适用于任何内容,因为浏览器不理解此类命名空间。

1 回复 | 直到 7 年前

Alohci 7 年前

实际上,HTML5解析器在处理每个令牌时,会查看下一个要添加到DOM的元素的父元素。通常,它将每个元素放在与其父元素相同的命名空间中。它开始希望元素在 http://www.w3.org/1999/xhtml 命名空间,但当它处理 <svg> 开始标记,它知道 <svg> 元素位于 http://www.w3.org/2000/svg 命名空间。所以svg元素包含的元素也放在 http://www.w3.org/2000/svg 命名空间。当它处理 </svg> 结束标记,下一个标记的父元素将不是svg元素,因此它将期望 http://www.w3.org/1999/xhtml 名称空间。

其他标记也会导致切换回 http://www.w3.org/1999/xhtml 名称空间,但是 <a> 和 </a> 标签不在其中。见 A start tag whose tag name is "svg" , the tree construction dispatcher 和 The rules for parsing tokens in foreign content 详细情况。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前