我有一个名为<li><a href="wwww.nordicreservation.com:8123">Earth</a></li>
的自定义HTML5标记。实际上，我的HTML文件中的某些位置的框架会为我创建并插入此标记。现在我想修改这个标签的CSS，所以在我的CSS文件中我去了：
<scroll-content>它做了它应该做的，但这是设计自定义标签的正确方法吗？
我无法为他们添加一个类，因为我没有创建标签，框架也没有，所以我无法在我的代码中访问它们，我想避免使用Javascript来查找这些标签并以这种方式添加类。
我更愿意了解修改自定义标记的标准/最安全的方式。
答案 0 :(得分：15)
您可以像使用标准HTML元素一样将CSS应用于自定义元素。
scroll-content { ... }没有任何问题，正如您的代码中所写。
一个小背景
基本级别的浏览器不知道存在哪些元素。它不会识别任何内容...... 直到 它才会显示在默认样式表（sample）中。
默认样式表将浏览器引入HTML元素。
因此，可以将自定义元素定义为默认样式表中未包含的元素。 （存在但不受浏览器支持的元素可以共享此定义。）
然而，可以在作者样式中将自定义元素引入浏览器。
以下是需要考虑的重要事项：
如果浏览器无法识别某个元素（即，它不在默认样式表中），则会应用CSS 初始值。
用户代理必须首先为每个属性分配指定的值 在以下机制上（按优先顺序排列）：
如果级联产生值，请使用它。
否则，如果继承该属性并且该元素不是文档树的根，请使用父计算的值 元件。
否则使用属性的初始值。每个属性的初始值都在属性的定义中指出。
如上所述，如果某个元素无法识别（＃1＆amp;＃2不适用），请使用属性定义中的初始值（＃3适用）。
所以在你的情况下：
您的自定义元素为：<scroll-content>
您的CSS是：scroll-content { overflow: hidden; }
您在问题中说，此代码执行了它应该执行的操作。但除非您提到的框架为自定义元素提供了其他样式，否则它无法工作（demo）。
这就是原因：
由于<scroll-element>不在默认样式表中，因此它将使用CSS初始值。
因此，这种HTML / CSS组合无法正常工作 - overflow属性将被忽略，height，width以及其他任何其他属性都会被忽略39; t适用于内联元素。
自定义元素需要display: block申请overflow才能正常工作（demo）。
同样，body，div，h1，p，ul作为块元素存在的唯一原因是因为它们是以这种方式定义的默认样式表（sample）。
所以，抛开支持和反对自定义元素的论据，这里的底线是：
将display: block添加到您的自定义元素中，您就可以继续使用了。
答案 1 :(得分：-2)
如果您可以避免使用自定义标签，那将是更好的选择，因为您永远不知道这些标签何时可以标准化或在某些时候具有特定用途。
我认为如果您为该自定义标记创建一个类会更安全，例如：
.scroll-content{
overflow: hidden;
}
这应该这样做。