同じサフィックスを共有するカスタマイズされたHTMLタグ（Angular.jsディレクティブ）のスタイルを設定するにはどうすればよいですか？CSSの動的要素名の選択

同じスタイルで希望されている3個のモーダルタグ

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

がある場合はどのように私は彼らが共通の属性を共有することなく、すべての3つに適用されるセレクタを作成するのですか？

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

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

出典

2017-02-23 Steven Tsao

XMLドキュメントの場合は、[名前空間]（https://www.w3.org/TR/css-namespaces-3/）を使用できます。[制約付きワイルドカードを許可する]（https：// drafts。 csswg.org/selectors-4/#type-nmsp）。しかし、おそらく 'svg'のような組み込みの名前空間を除いて、HTML5では動作しないようです。 – z0r

これは角度とどのように関連していますか？ –

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

角度

関連する問題