1

クラス「icon-」と文字のセットを使用して、数字ではなく要素の CSS 定義を作成する可能性はありますか。この記事によると、次のようなものです。

[class^='/icon\-([a-zA-Z]+)/'] {}

動作するはずです。しかし、何らかの理由でそうではありません。

特に、「icon-user」、「icon-ok」などのすべての要素のスタイル定義を作成する必要がありますが、「icon-16」や「icon-32」は作成しません。

それはまったく可能ですか？

4

3 に答える 3

4

CSS 属性セレクターは正規表現をサポートしていません。

実際にその記事をよく読んだ場合：

正規表現一致属性セレクター

それらは存在しませんが、それはとてもクールではないでしょうか? 実装するのがどれほど難しいか、または解析するのにどのように費用がかかるかはわかりませんが、それは単なる爆弾ではないでしょうか?

最初の 3 つの単語に注意してください。それらは存在しません。この記事は、CSS 属性セレクターで正規表現がサポートされていないことを嘆くブログ投稿にすぎません。

しかし、jQuery を使用している場合は、James Padolsey の:regexjQuery 用セレクターに興味があるかもしれません。指定された CSS セレクターは、たとえば次のようになります。

$(":regex(class, ^icon\-[a-zA-Z]+)")
于 2012-05-14T09:25:18.247 に答える
0

私はFacebookでこれに答えましたが、ここでも共有したほうがいいと思いました:)

私はこれをテストしていないので、機能しない場合は撃たないでください:)しかし、クラス名に単語アイコンを含む要素を明示的にターゲットにするが、数字を含むクラスを含めないようにブラウザに指示することになると思います。

コード例：

div[class|=icon]:not(.icon-16, .icon-32, icon-64, icon-96) {.....}

参照：

属性セレクター...（http://www.w3.org/TR/CSS2/selector.html#attribute-selectors）：[att | = val]

att属性を持つ要素を表します。その値は、正確に「val」であるか、「val」で始まり、直後に「-」が続きます（U + 002D）。

：セレクターではありません...（http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/）

お役に立てれば、

ワシーム

于 2012-05-14T15:41:44.123 に答える
0

以前のソリューションをテストしたところ、機能しないことが確認できました (BoltClock のコメントを参照)。ただし、これは次のことを行います。

OP: 「特に、「icon-user」、「icon-ok」などのすべての要素のスタイル定義を作成する必要がありますが、「icon-16」や「icon-32」は作成しません」

必要な CSS コードは次のようになります。

/* target every element were the class name begins with ( ^= ) "icon" but NOT those that begin with ( ^= ) "icon-16", or "icon-32" */
*[class^="icon"]:not([class^="icon-16"]):not([class^="icon-32"]) {.....}

また

/* target every element were the class name begins with ( ^= ) "icon" but NOT those that contain ( *= ) the number "16" or the number "18" */
*[class^="icon"]:not([class*="16"]):not([class*="32"]) { ...... }

テストコード:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{border:1px solid #999;margin-bottom:1em;height:100px;}
            *[class|=icon]:not([class|=icon-16]):not([class|=icon-32]) {background:red;color:white;}
        </style>
    </head>     
    <body>
        <div class="icon-something">
            <h4>icon-something</h4>
            <p><strong>IS</strong> targeted therfore background colour will be red</p>
        </div>
        <div class="icon-anotherthing">
            <h4>icon-anotherthing</h4>
            <p><strong>IS</strong> targeted therfore background colour will be red</p>
        </div>
        <div class="icon-16-install">
            <h4>icon-16-install</h4>
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-16-redirect">
            <h4>icon-16-redirect</h4>
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-16-login">
            <h4>icon-16-login</h4>
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-32-install">
            <h4>icon-32-install</h4> 
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-32-redirect">
            <h4>icon-32-redirect</h4> 
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-32-login">
            <h4>icon-32-login</h4>
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
    </body>
</html>
于 2012-05-14T16:21:37.450 に答える