0

ID 名の特定の単語に基づいて ID のスタイルを設定する方法はありますか?

私がこのようなものを持っている場合：

<div id="name-of-id.1234">Something</div>
<div id="name-of-id.5678">Something</div>
<div id="name-of-id.4321">Something</div>

通常、次のようにスタイルします。

div#name-of-id\.1234,
div#name-of-id\.5678,
div#name-of-id\.4321 {
    color: #F0F;
}

しかし、私はむしろ次のようなことをしたいと思います:

div[# contains the word "name-of-id"] {
    color: #F0F;
}

そのようなIDで特定の単語をターゲットにする方法はありますか?

HTML へのアクセスは非常に限られています。スクリプトやスタイルをレイアウトに追加することはできますが、それだけです。

4

2 に答える 2

4

属性セレクターに一致するCSS3 プレフィックス部分文字列を使用します。

div[id^="name-of-id"] {
    color: #F0F;
}

現在のすべてのブラウザでサポートされています。古いバージョンの IE でサポートするには、Selectivizr polyfillを使用します。[id$="..."]接尾辞 ( ) および一般的な部分文字列 ( )のセレクタもあります[id*="..."]。

于 2012-07-06T18:13:12.520 に答える
0

JavaScript を追加できる (そして jQuery を使用している) 場合は、次のようなものを追加できます。

$('div').each(function(){
    if(this.id.match('name-of-id')) {
        $(this).addClass('someClass');
    }
});

jQuery がなければ、次のことができます。

var elems = document.getElementsByTagName('div');
for(var i=0; i<elems.length; i++) {
    if(this.id.match('name-of-id')) {
        this.className = this.className + 'someClass';
    }
}

そして、クラスでスタイルを設定します:

.someClass {
    /* your CSS styles */
}

確かに、$('div')ページにそれらがたくさん含まれている場合、実行は遅くなります (javascript に関する限り)。したがって、そのセレクターを絞り込むことができれば、これはより実行可能なソリューションになる可能性があります。

もっと言えば、部分的な ID 名を CSS だけで一致させる方法は私が知っているわけではありません。

于 2012-07-06T17:58:38.130 に答える