1

私はこのhtmlを持っています:

<div>
    <input class="orderrow-1" type="text"></input>
    <input class="orderrow-2" type="text"></input>
</div>

そしてこのCSS：

input[class^='orderrow-']
{
    border: 1px solid #e2e2e2;
    color: #333;
    font-size: 1em;
    margin: 5px 5px 6px 0px;
    padding: 5px;
    width: 100px;
    text-align: right;
}

「orderrow-」で始まるクラスですべての入力フィールドのスタイルを設定しようとしましたが、上記は機能しません。助言がありますか？

編集：申し訳ありませんが、上記は機能します。問題は、ケースが 2 つあることです。このような：

<div>
    <input class="trigger orderrow-1" type="text"></input>
    <input class="trigger orderrow-2" type="text"></input>
</div>

orderrow-1 の前に何かがある場合、セレクターは機能しません。アイデア？

4

2 に答える 2

1

^=問題は、ワイルドカードセレクターが必要な場合は、クラス属性の実際の値で始まるクラス属性の値（すべてのクラス名を含む）と一致することを意味するプレフィックスマッチを使用しているorderrow-ことです。ワイルドカードセレクターが必要な場合仕様はこれを推奨*=しています。任意の時点で文字列を含む値を探します。

例：

input[class ^="orderrow-"], input[class *=" orderrow-"]
{
    border: 1px solid #e2e2e2;
    color: #333;
    font-size: 1em;
    margin: 5px 5px 6px 0px;
    padding: 5px;
    width: 100px;
    text-align: right;
}

input.orderrow-1 {
    border: 1px solid #F00;
}

属性セレクターとクラスセレクターは同じ特異性を持っているため、属性の下にオーバーライドを配置して、スタイルの適切なカスケード*を確保する必要があることに注意することが重要です(私の例のように- jsfiddle )。

編集:コメントに従って、例でより正確なセレクターを使用します。

docsは、3 つの異なるワイルドカード セレクターのドキュメントを参照してください。

※たまに言葉をつくりますが、意味がわかれば…

于 2012-09-17T11:38:21.523 に答える
0

ここで、さまざまなcss3疑似クラスの私のコードペンテストをチェックしてください http://codepen.io/jamiepaterson/pen/cADfs

必要なのは、このテストの紫色のテキストの色です。

于 2012-09-21T16:16:13.207 に答える