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

Question

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

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

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

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

它们是 inline-block 元素，我希望它们以特定的边距分隔（但在 last/first 元素之后或之前没有边距）。为此，我在想类似的东西：

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

但这行不通...有什么想法可以在不使用 special-element 的 class 的情况下实现吗？

Answer 1

您只需要转义破折号即可。

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

<special-element></special-element>

Is it possible to style custom elements with dashes in the element name?