如何设计一组共享相同后缀的自定义HTML标记（Angular.js指令）？在CSS中选择动态元素名称

如果有期望用相同的风格

1. <a-modal> 
2. <b-modal> 
3. <c-modal>

如何创建适用于所有三种，而无需他们都有一个共同的属性选择器配备三条模式的标签？

// doesn't work 
[*-modal] { 
    //style... 
} 

// would've worked with attributes: 
div[modal="true"] { 
    //style... 
}

来源

2017-02-23 Steven Tsao

如果它是一个XML文档，您可以使用[namespaces]（https://www.w3.org/TR/css-namespaces-3/），它[允许约束通配符]（https：//草稿。 csswg.org/selectors-4/#type-nmsp）。但是它们似乎不适用于HTML5，除了可能用于像'svg'这样的内置命名空间。 – z0r

这与Angular有什么关系？ –

Angular的自定义指令。我可以删除该标签。 –

如果您正在使用角指令，那么你可以使用类的名字，而不是一个标记名称与通配符CSS选择器一起匹配您的指令：

HTML

<div class="a-modal"></div>

CSS

[class*="-modal"] {}

角度

restrict: 'C'

不过，我会建议只是介绍一个共同的CSS类所有的人。

来源

2017-02-23 23:44:04

应该是简单的：

a-modal, b-modal, c-modal { 
    … 
}

如果您想在不长的逗号分隔的CSS选择大量的自定义HTML代码，我建议<modal type="a">等，modal { … }。

来源

2017-02-23 23:13:10 Gwellin

我想知道是否有另一种方式，而不是手动指定标签名称。这仍然有帮助，谢谢。 –

没有像你的假设例子那样的标记通配符方法。 – Gwellin

在CSS中选择动态元素名称

回答

HTML

CSS

角度

相关问题