1

次のようなCSSセレクターがあった場合#subtab-1, #subtab-2 etc

ワイルドカードセレクターをそのまま作成できますdiv[id^='subtab-']

しかし、次のようなセレクターのワイルドカードを作成する方法がわかりません

#subtab-1-sub1 
#subtab-1-sub2 
#subtab-1-sub2 
#subtab-2-sub1 
#subtab2-sub2 
#subtab2-sub-3
etc...

どうすれば次のようなものを作ることができますか:

div[id^='subtab-*tab-*'] (*=wildcard)
4

4 に答える 4

12

私があなたの質問を正しく理解している場合、ID が数字で始まり、subtab-その後-subに別の数字が続くすべての要素を選択しようとしています。また、このセレクターを に一致させず#subtab-1、 のような接尾辞を持つものだけにしたいよう#subtab-1-sub1です。

これはCSSではできません。CSS は、ワイルドカードを許可するセレクターを提供しません。ただし、かなり近いものをハックすることはできます。

うまくいくかもしれないハッキーセレクター

[id^="subtab-"][id*="-sub"]で始まり、id のどこかにsubtab-含まれる任意の id と一致します。これはおそらく機能しますが、やなどで-sub誤検知を引き起こす可能性があります。#subtab-1-subtle#subtab-something-sub2#subtab-sub

機能する可能性のある別のハッキーセレクター

#subtab-?-sub?要素は常に要素の内部に含まれ、#subtab-?要素#subtab-?に別の要素を含めることはできないと仮定すると、子コンビネータ#subtab-?を使用してそれらをターゲットにすることができます。[id^="subtab-"] > [id^="subtab-"]

代わりにクラスに依存する

より良い解決策は、たとえば、共通のクラスをターゲットにしようとしているすべての要素を指定することです<div class="subtab-sub">。その後、それらすべてを選択するのは簡単.subtab-subです。クラスを使用すると、属性セレクターを使用するよりもはるかに高速なパフォーマンスが得られます。

于 2013-05-02T06:55:27.067 に答える
0

HTML 内の要素をアドレス指定する方法として、この方法で構築された ID を使用するかどうかはわかりません。などのクラスを使用して実験します。疑似クラスをsubsubtab使用して、サブタブまたはサブサブタブを個別にアドレス指定できます。nth-child

<div class="tabs">
   <div class="subtab">
     <div class="subsubtab">...</div>
     <div class="subsubtab">...</div>
     ...
   </div>
   <div class="subtab">
     ...
   </div>
</div>

次に、CSSは次のようになります

div.subsubtab { color: brown; }

また

div.subtab:nth-child(2) { border: 1px solid red; }
于 2013-05-02T03:45:16.793 に答える
-1

このjQueryセレクター
を調べてみてください。うまくいくと思います。

于 2013-05-02T03:46:53.257 に答える