Html 如果我'；我为每一个设置CSS？_Html_Css

Html 如果我'；我为每一个设置CSS？

html css

Html 如果我'；我为每一个设置CSS？,html,css,Html,Css,我希望我自己的HTML标签，但我不希望新标签可能使用相同的名称，导致他们在未来打破这是个好主意吗？我可以使用名称空间来避免冲突吗例子： HTML: <b:HGroup> <span>item 1</span><span>item 2</span><span>item 3</span> </b:HGroup> 我读到一个相关的问题，它建议DTD。我不希望创建DTD，但如果有必要，我希望以

我希望我自己的HTML标签，但我不希望新标签可能使用相同的名称，导致他们在未来打破

这是个好主意吗？我可以使用名称空间来避免冲突吗

例子： HTML:

<b:HGroup>
    <span>item 1</span><span>item 2</span><span>item 3</span>
</b:HGroup>

我读到一个相关的问题，它建议DTD。我不希望创建DTD，但如果有必要，我希望以内联方式定义它。另外，我希望它能作为HTML5而不是XHTML运行

注: 我不想使用

div

加上

类

据我所知，如果我显式注册我的自定义元素，我编写的自定义元素看起来不会被将来同名的元素覆盖。以下是一段引用自：

由于元素注册可以随时进行，因此非自定义可以创建将来可能成为自定义的元素在注册了适当的定义之后。这些因素被称为未定义的潜在自定义元素。如果有这样的定义, 一旦注册，元素将升级，成为自定义元素元素

我已经包含了一个基于答案的完整页面原型，我无法让它将任何CSS附加到任何具有名称空间的元素。我在其中一个链接上找到了一些JS，但是注释掉了其中的一部分，这给了我错误。我主要关心的是让带有名称空间的元素由带有名称空间的CSS进行样式化。从我的理解来看，没有JS应该可以工作

<!DOCTYPE html>
<html xmlns:xhtml="http://www.w3.org/1999/xhtml"
  xmlns:s="http://www.w3.org/2002/spark"
  xmlns:space="http://www.w3.org/2002/space"
  xmlns:spaced="http://www.w3.org/2002/spaced">
<head>

<script>
  "use strict";

  const inDocument = document.querySelector("example-element");
  const outOfDocument = document.createElement("example-element");
  // Before the element definition, both are HTMLElement:
  //console.assert(inDocument instanceof HTMLElement);
  //console.assert(outOfDocument instanceof HTMLElement);

  //class ExampleElement extends HTMLElement {};
  //customElements.define("example-element", HTMLElement);

  //class ExampleElement3 extends HTMLElement {}
  //customElements.define("element3", ExampleElement3);

  //document.body.appendChild(outOfDocument);

</script>
<style>

@namespace s url(http://www.w3.org/2000/spark);
@namespace space url(http://www.domain.org/2000/spark-space);
@namespace spaced "http://www.domain.org/2002/spark-spaced";

example-element {
    color: red;
    display:block;
}
element2 {
    color:green;
    font-weight:bold;
}
s|element3 {
    color:yellow;
}
space-element {
    color:yellow;
}
space|space-element {
    display:block;
    color:yellow;
}
spaced|spaced-element {
    display:block;
    color:yellow;
}
</style>
</head>

    <body>
        <example-element>example-element</example-element>
        <element2>element 2</element2>
        <space-element>space element</space-element>
        <s:element3>s namespace element 3</s:element3>
        <space:space-element>space namespace el</space:space-element>
        <spaced:spaced-element>spaced namespace el</spaced:spaced-element>
    </body>

</html>


“严格使用”；
const inDocument=document.querySelector（“示例元素”）；
const outOfDocument=document.createElement（“示例元素”）；
//在元素定义之前，两者都是HTMLElement：
//assert（HtmleElement的inDocument实例）；
//断言（HtmleElement的outOfDocument实例）；
//类ExampleElement扩展HtmleElement{}；
//定义（“示例元素”，HtmleElement）；
//类ExampleElement3扩展HtmleElement{}
//自定义元素。定义（“元素3”，ExampleElement3）；
//文件.正文.附件（文件外）；
@命名空间的url(http://www.w3.org/2000/spark);
@命名空间空间url(http://www.domain.org/2000/spark-space);
@命名空间间隔“http://www.domain.org/2002/spark-spaced";
示例元素{
颜色：红色；
显示：块；
}
元素2{
颜色：绿色；
字体大小：粗体；
}
s |元素3{
颜色：黄色；
}
空间元素{
颜色：黄色；
}
空间|空间元素{
显示：块；
颜色：黄色；
}
间隔|间隔元素{
显示：块；
颜色：黄色；
}
示例元素
要素2
体积元
s命名空间元素3
空间名称空间el
间隔名称空间

这里有一个经过仔细研究的问题。这样做，您就消除了所有“有效”的解决方案

你完全可以按照你的建议去做，这（无害地*）违反了标准。也就是说，所有HTML标准都允许未知元素，指示浏览器忽略它们（本质上，它们都成为
元素），因为没有指示如何处理它们，尽管CSS确实会影响它们。这将适用于所有浏览器，即使是Mosaic和原始IE（尽管CSS在如此古老的浏览器中不起作用）
如您所述，“正确”的方法是定义您自己的（DTD），然后将其包含在~HTML文档顶部的
标记中。这可能是矫枉过正，但从技术上讲，这是正确的方法
另一个解决方案（您也已经排除了）是对内联元素使用
，对块元素使用
，因为默认情况下这些元素实际上不做任何事情
该解决方案的一个变体是覆盖一些原本无用的标记的操作，并在CSS中禁用其标准属性，例如：

s{ 文本装饰：无；/*通过删除行*/ 显示：内联块；垂直对齐：中间对齐； }

（*使用自定义元素名称时可能遇到的“危害”是，如果不指定DTD（您自己的DTD或具有确切版本的现有DTD），理论上HTML标准的未来版本可能会为自定义元素定义一些不需要的属性。）
HTML5支持自定义HTML元素，但根据要求，它们应包含
-
字符：
名称必须包含破折号（-）。例如，
，
和
都是有效名称，而
而
则不是。此限制允许解析器区分自定义元素和常规元素，但也确保将新标记添加到HTML时的转发兼容性
请参阅以获得良好的介绍
将CSS应用于自定义HTML元素的方式与将CSS应用于标准HTML元素的方式相同：

自定义元素{ 字体大小：粗体；背景色：#ff0； }

这是一个自定义HTML元素
是的，我认为所有较新的浏览器都允许这样做。然而，如果你不小心，这可能会成为一个大烂摊子。我建议使用标准元素。较老的浏览器和其他开发人员有更好的理解方式。你考虑过吗？这似乎有些过分，但可能会对您有所帮助。我添加了一个完整的HTML页面示例，自定义命名元素似乎可以工作，但具有名称空间的元素不工作。CSS没有被应用。现在我试图避免使用JS，但我已经从答案中提供的链接中包含了一些JS，以防确实需要。对我来说，JS在
控制台
和
类
行上生成解析错误，所以我已经将它们注释掉了。如果可能的话，我想找出名称空间问题，并将其优先于JS问题。更新：看起来我需要将
s | element
更改为
s \：element
。Th
<!DOCTYPE html> <html xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:s="http://www.w3.org/2002/spark" xmlns:space="http://www.w3.org/2002/space" xmlns:spaced="http://www.w3.org/2002/spaced"> <head> <script> "use strict"; const inDocument = document.querySelector("example-element"); const outOfDocument = document.createElement("example-element"); // Before the element definition, both are HTMLElement: //console.assert(inDocument instanceof HTMLElement); //console.assert(outOfDocument instanceof HTMLElement); //class ExampleElement extends HTMLElement {}; //customElements.define("example-element", HTMLElement); //class ExampleElement3 extends HTMLElement {} //customElements.define("element3", ExampleElement3); //document.body.appendChild(outOfDocument); </script> <style> @namespace s url(http://www.w3.org/2000/spark); @namespace space url(http://www.domain.org/2000/spark-space); @namespace spaced "http://www.domain.org/2002/spark-spaced"; example-element { color: red; display:block; } element2 { color:green; font-weight:bold; } s|element3 { color:yellow; } space-element { color:yellow; } space|space-element { display:block; color:yellow; } spaced|spaced-element { display:block; color:yellow; } </style> </head> <body> <example-element>example-element</example-element> <element2>element 2</element2> <space-element>space element</space-element> <s:element3>s namespace element 3</s:element3> <space:space-element>space namespace el</space:space-element> <spaced:spaced-element>spaced namespace el</spaced:spaced-element> </body> </html>