是否可以在元素名称中使用破折号来设置自定义元素的样式？答案

【问题标题】：Is it possible to style custom elements with dashes in the element name?是否可以在元素名称中使用破折号来设置自定义元素的样式？
【发布时间】：2015-04-23 22:15:32
【问题描述】：

恐怕这根本不可能，但我找不到关于这个的问题，也找不到关于是否可能的参考，所以我在这里问......

如果您熟悉 AngularJS 或 Polymer，您就会知道您可以在元素名称中使用带有破折号的自定义元素，例如 special-element。我的问题是，如何在不使用类的情况下为所有这些元素设置样式？

问题是，我的代码中有这样的内容：

<special-element></special-element>
<special-element></special-element>
<special-element></special-element>

它们是inline-block 元素，我希望它们以特定的边距分隔（但在最后一个/第一个元素之后或之前没有边距）。为此，我正在考虑类似的事情：

special-element + special-element {
    margin-left: 10px;
}

但这不起作用...关于我可以在不使用 special-element 的类的情况下实现这一点的任何想法吗？

【问题讨论】：

标签： css custom-element

【解决方案1】：

您只需要转义破折号。

special\-element {
  padding: 10px;
  background: red;
  display: block;
}

&lt;special-element&gt;&lt;/special-element&gt;

【讨论】：

我以为我已经尝试过了……我可能被 Sublime Text 语法高亮欺骗了。我不会确认或否认：D 谢谢。
不过，如果浏览器不允许未知元素的样式，那将不起作用。