web-dev-qa-db-ja.com

ユーザーエージェントのスタイルシートがCSSを上書きしないようにする方法

私はカーソルを設定しようとしています：dom要素にポインターがありますが、入力がそれを取得していません（チェックボックスにカーソルを合わせたときにポインターカーソルが表示されません）。クロムでは、「ユーザーエージェントスタイルシート」が私のCSSをオーバーライドしていることがわかります。 WTF？

<!doctype html>
<body>
    <div class='a'>
        <input type='checkbox'>
    </div>

    <style>
        .a {
            cursor: pointer;
        }
    </style>
</body>

私はこの質問を見ました： なぜユーザーエージェントスタイルシートが私のスタイルをオーバーライドするのですか？ しかし、私の問題はDoctypeではないようです 推奨doctype です。

ここで!importantを使用することは受け入れられません。また、入力ノードを直接スタイリングすることもできません。奇妙なブラウザのユーザーエージェントスタイルについて心配する必要はありません。どうしたの？

明確にするために、私の質問は、ユーザーエージェントスタイルシートがcssをオーバーライドしている理由と、thatを停止する方法についてです。私の質問は、notこの振る舞いをハックする方法です。間違っていない場合、cssの正しい動作は、カーソルスタイルが子ノードに継承されることです。

これはCSSの予想される動作ですか？

cssgoogle-chromefirefox
36
B T

ここでの「問題」は、作成者のスタイルシートに実際にはinputスタイルがないことです（詳細は 仕様 を参照）。したがって、isユーザーエージェントスタイルシートで定義されているものが使用されます。

（関連する）ユーザーエージェントルール（Chrome）は次のとおりです。

input, input[type="password"], input[type="search"] {
   cursor: auto;
}

いくつかの方法で目的を達成できます。

  1. 入力を直接選択するcssクラスを作成します。たとえば、
    • 別のcssクラスを使用する、または
    • 定義済みのクラス内で入力を選択し、
    • 等
  2. すべての入力でカーソルスタイルの継承動作を明示的に設定する

（1）の場合：

<style>
  .a, .a input {
      cursor: pointer;
  }
</style>

（2）の場合：

<style>
  input {
      cursor: inherit;
  }
  .a {
      cursor: pointer;
  }
</style>
20
Beterraba

これはcssがcssであるように思えますが、これは残念です。最も一般的な回避策は、このcssを定義することです：

<style>
  input {
    cursor: inherit;    
  }
</style>

これにより、ユーザーエージェントがスタイルを継承しないすべての場合に、最初に予期される動作が可能になります。これは、「cursor：pointer」で入力を直接スタイリングするよりも優れています。このスタイルを一度設定するだけでよく、入力を含む「cursor：pointer」スタイルのdomNodesには、自動的に入力にポインターカーソルがあります。

3
B T

私が言う説明を詳しく説明して一般的にこの質問に答えると、cssプロパティの最終値は this postによる4ステップ計算（つまり、仕様、計算、使用、および実際）です。

仕様では、カスケードが継承より優先されます。

以来、入力のcssプロパティがないため、入力に適用されるユーザーエージェントスタイルシートは、クラスaから継承された値よりも優先されます。継承された値を使用するには、@ B Tによって提案されたコードの使用をオーバーライドする必要があります。

<style>
  input {
    cursor: inherit;    
  }
</style>

カスケードの説明：

簡単な説明
詳細な説明

ここで詳細な説明を参照しています-
CSS宣言が適用される順序を制御する3つの主要な概念があります。

  1. 重要性
  2. 特異性
  3. ソースオーダー

CSS宣言の重要度は、CSS宣言の指定場所によって異なります。競合する宣言は、次の順序で適用されます。後のものは前のものを上書きします：

  1. ユーザーエージェントスタイルシート
  2. ユーザースタイルシートでの通常の宣言
  3. 著者スタイルシートでの通常の宣言
  4. 著者スタイルシートの重要な宣言
  5. ユーザースタイルシートでの重要な宣言

特異性とソースの順序はこの質問には関係ありません。同じ説明については上記のリファレンスを参照してください

上記のコードでは、ユーザーエージェントスタイルシートが要素に直接バインドされているだけなので、優先されます。

短い継承では、<カスケード<重要性<ユーザーエージェントスタイルシートが優先順位です。

3
Keshav

私はこの問題があると思い、通常の容疑者、Doctypeなどをチェックしました。これはばかげているように、CSSでコメントアウトされていると思っていたスタイルが判明しました。ただし、Chromeはスタイルを実際のスタイルであるかのように表示し、オーバーライドされていました。

0
LarryBud