5

2つの可能性がある次のマークアップを検討してください。

<input class="someclass ng-valid ng-invalid-otherstuff ng-valid-amountdetermined   some-other-class">
<input class="someclass ng-invalid ng-valid-otherstuff ng-invalid-amountdetermined some-other-class">

「金額」は可変の単語であり、これは「メッセージ」、「アカウント」、実際には何でもかまいません。CSSで区別できるようにする必要があります。属性セレクターは、^、*、|の属性値全体を考慮するため、失敗します。または〜。

クラスを選び出し、そのクラスが「ng-valid-*determined」であるかどうかを確認する必要があります。これはcssを使用して単純に不可能であるように見えますか、それとも何かが足りませんか？

回避策は「ng-valid-determined*」を生成することですが、これはまさに私が避けたいことです。誰かがこれについて何か考えを持っていますか？明確にするために、私は「いくつかのクラス」が何であるかを知りません、私は私のcssセレクターを特定するためにそれらを使用することはできません。問題は、必要なクラスがクラス配列内のどこにでも配置できることです。

問題を視覚化するためにフィドルを作成しましたが、ng-valid-*determinedまたはng-invalid-*determinedをターゲットにできる必要があるため、これはもちろん解決策ではありません。

http://jsfiddle.net/mC2EW/

*で2つのcss属性セレクターを使用することと混同しないでください

// edit1：質問を簡略化しました// edit2：フィドルを追加しました

4

4 に答える 4

4

これは古いものですが、私は同様の解決策を探していました。私は最良の答えがあると信じています。私のペンを見てください。

HTML

<input class="someclass ng-valid ng-invalid-otherstuff
ng-valid-amountdetermined some-other-class"> <input class="someclass
ng-invalid ng-valid-otherstuff ng-invalid-amountdetermined
some-other-class">

CSS

[class*=ng-valid][class*=ng-invalid-otherstuff][class*=determined] {
background: #000; }
[class*=ng-invalid][class*=ng-valid-otherstuff][class*=determined] {
background: #ddd; }

同じ属性セレクター内で複数のワイルドカードをターゲットにすることはできませんが、ワイルドカード属性セレクターをチェーンしてターゲットを見つけることができます。

于 2015-05-15T00:32:43.373 に答える
2

単純に使えない理由はあります[class*="amount"]か？

JSFiddleの例。

data-*クラスを使用して、属性に適したものを保持しているようです。

<input class="someClass determined" data-validity="valid" data-amount-determined="false" />
<input class="someClass determined" data-validity="invalid" data-amount-determined="true" />

を使用したJSFiddleの例data。

于 2013-02-15T15:20:59.770 に答える
2

ここでできる最善のことは、.someclassを探して、それも決定されているかどうかを確認することだと思います。

input.someclass[class*="determined"] { background-color: red; }

フィドル： http： //jsfiddle.net/gaE5X/

于 2013-02-15T15:23:37.073 に答える
2

申し訳ありませんが、現在の状況を考えると、これはセレクターだけでは実行できません。属性セレクターには、値の途中でワイルドカードを使用する方法がありません。また、スペースで区切られた属性内の個々のコンポーネントをチェックすることも、クラスセレクターがそのような機能を提供することもできません。これはAngularJSまたはCSSの設計上の欠陥と見なすことができますが、それが何であれ、純粋なCSSセレクターでは実行できません。

これを別の方法で回避する必要があります。コメントで述べたように、ng-classカスタムクラスを追加して選択を容易にするために簡単にフックできます。または、別の回答で提案されているように、代わりにデータ属性を使用して検証情報を格納することを検討してください。

于 2013-02-16T03:16:07.863 に答える