0

コードで CSS に問題が発生したため、この奇妙な質問をしています。

概要

cssでスタイリングしたボタンがありました。

.button-phone
{
    width: 15px;
    background: url('/img/icon_phone.png') no-repeat;
    font-size: 10.5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    width: 14px;
    height: 14px;
   *margin-right: .3em;
   line-height: 14px;
   vertical-align: text-top;
}

ここでは、単一のスタイル コードで幅が に設定されて15pxいます。14px

私の質問

width またはその他のプロパティを 2 回割り当てるとうまくいくかどうか知りたいですか? そして、それが機能する場合、どちらが適用されますか?

私の場合、ボタンは幅に設定されていて、どの幅が設定されているかわかりません。どちらが設定されているかを知るにはどうすればよいですか?

4

4 に答える 4

5

最後に割り当てたもの (あなたの場合はwidth:14px) が使用されます

于 2013-04-29T09:57:24.403 に答える
3

この特定の例では、最後のプロパティが以前に定義された同じプロパティをオーバーライドします

とにかく、一般的な観点からは、いくつかの例外がある可能性があります。

div {
    font-size: 12px;
    font-size: 1rem;
}

ここで使用されるプロパティはfont-size: 12px;、ブラウザーが単位の値を認識しない場合に使用されるremため、この例では、適用されるプロパティは特定のブラウザー サポートに依存します。最初のプロパティが 2 番目のプロパティよりも特異性の高いルール内で定義されている場合、別の例外が発生します。

于 2013-04-29T10:02:46.320 に答える
2

上記の例では、ルールは出現順に適用されるため、最後のルールが使用されます。ただし、一般的に、これが決定する唯一の方法ではありません。

一般的な要素にスタイルを割り当て、別の値を含むより具体的なセレクターが別の場所で使用されている場合、CSS は順序に関係なく、より具体的なセレクターを使用します。

例えば：

 div#mydiv {
   width: 300px;
 }

 div {
   width: 600px;
 }

ここでは、 div の幅id="mydiv"が取得300pxされるため、 が使用され、後の規則はオーバーライドされますが、あまり具体的ではありません600px。

特異性の順序の一般的な考え方は次のとおりです。

tag < class < id

したがって、クラスは一般的なタグをオーバーライドし、ID はそれらをオーバーライドします。

于 2013-04-29T10:02:11.460 に答える
1

Css はカスケーディング スタイル シートの略で、ブラウザが CSS を上から下に解釈することを意味します。

width を連続して 20 回指定できます。最後のバージョンのみが使用され、値が割り当てられますが、別の width プロパティに遭遇するたびに値が上書きされます。したがって、基本的に、最後に width-property に遭遇すると、その値がページの最終バージョンで使用されます。

また、使用しているブラウザに応じて、適用されているスタイルを確認する方法がいくつかあります。

  • Chrome: F12 を押すとインスペクターが開きます (または、ページを右クリックして [要素を検査] を選択すると、クリックした要素にジャンプします)。
  • IE: F12 キーも押すと、新しいウィンドウが開き、そのページの HTML/CSS を調べることができます。
  • Opera: ページを右クリックし、「要素の検査」を選択します
  • Firefox: ページを右クリックし、[ページのソースを表示] を選択します。
  • Safari: ページを右クリックし、[ソースを表示] を選択します。

次に、詳細を知りたい要素に移動するのはあなた次第です。

于 2013-04-29T10:02:09.407 に答える