1

cssが以下の場合：

input[type="text"]
{
     border: 1px solid green; 
}

.text
{
     border: 1px solid red ; 
}

そして、htmlが以下の場合：

<div>
 <input type="text" class="text"/>
</div>​

テキストボックスのborder-colorは緑色です。「要素」の方が優先度が高いようです。
.classを有効にする方法は？使用する必要があり!importantますか？

他の選択肢はありますか？

私は以下のCSSコードをテストしました：

input[type="text"]
{
     border: 1px solid green; 
}

input[type="text"] .text
{
     border: 1px solid red; 
}

HTMLコード：

<div>
     <input type="text" class="text"/>
</div>

何だと思いますか？</ p>

まだ緑。

'input [type = "text"] .text'のスペースを削除すると、input [type="text"]。textになります。それで大丈夫です。境界線の色は赤です。

4

4 に答える 4

7

CSSのCinはカスケードを表します。他のルールよりも高い優先順位を与える必要があります。

input.text
{
     border: 1px solid red ; 
}
于 2012-12-20T01:45:06.657 に答える
0 
/* Set default border for `text` elements */
.text
{
     border: 1px solid red; 
}

/* Override for input elements */
input.text
{
     border: 1px solid green; 
}
于 2012-12-20T01:47:19.170 に答える
0

スタイルは順番に適用されますが、特異性のルールにも従う必要があります。は.textより具体的ではないinput[type="text"]ため、緑色の境界線が「優先」されます。赤枠のルールをより具体的にすると、期待どおりの結果が得られます。

次のようなことを試してinput.text、何が起こるかを確認してください。それでもうまくいかない場合は、さらに具体的にする必要があります。

于 2012-12-20T01:53:15.763 に答える
0

それはあなたのセレクターの重さの問題です。

と

`input[type="text"]

inputとセレクターの両方を渡す[type=text]ので、合計2つを渡します。

と

.text

あなたは1つだけを通過しています。これにより、重みと特異性が低下するため、最初のセレクターが2番目のセレクターに優先します。

before（つまり、input.text）を追加inputすると、2番目のスタイルに重みが追加されます。これは、カスケードスタイルシートに期待されるとおりに優先されます。

特異性は、特異性計算機などのWebサイトを通じて簡単に視覚化できます。

于 2012-12-20T02:03:37.790 に答える