如何設計一組共享相同後綴的自定義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

角度

相關問題