CSSの優先度と階層

Question

これはおそらく非常に簡単な質問ですが、私はSQLからプロパティ値を設定するためのワンストップショップを作成しようとしており、今来た問題の答えを知りたいと思います

親（フォームと言う）を読み取り専用に設定しても、その親のオブジェクトを読み込み専用にしないで設定すると、そのボタンは読み込み専用になります。のみ？また、親や子供には何があったのか！

私は優先度の高いシステムをセットアップしようとしています。そのため、予期しないことが起こらないような問題に対処することなく、ユーザーはこれらの種類のプロパティ値を設定できます。

Answer 1

readonlyはCSSプロパティではないため、スタイルはありません。それはhtmlタグに直接入ります。

検索の主なキーワードは、css inheritanceとcss specifityです。

概要：はい、固定規則があります。すべてのプロパティが継承されるわけではありません。あなたはそれらを見ることができます。 MDN CSS Reference。 どのCSSルールが起動するかは、スタイルルールの配置場所とセレクタの具体的な種類によって異なります。

カスケーディングの順序(source)：

1. インラインスタイル（HTML要素内）（ヘッド部内）
2. 外部および内部スタイルシート
3. ブラウザのデフォルト

特異性は次のようですスコアシステム。最高得点（=最高の特異性）を有するルールが適用される。

1. ID。 #paragraph {...}（100点）
2. クラス.redparagraphs {...}（10ポイント）
3. タグ。 p {...}（1ポイント）

したがって、ルールdiv p span {...}は3つのタグセレクタのためスコアが3点になります。 #wrapper .centered #main .fancynews .withoutborder p {...}には231ポイントなどがあります。

2つのルールが同じスコア（指定）を持つ場合、最後に処理されたカウント（スタイルシートは上から下まで処理されます）。スタイルを適用するための

「間に合わせ」トリックは

.alwaysredtext { color:#F00 !important; } 

のようなルールに!importantを追加することですこれは、限り、彼らはまた、持っていないので（あなたが作ったどんな色ルールオーバーライドしwhereeverます!important）。後でメンテナンスの問題があるため、これはお勧めできません。

p.s.：Specifity Calculatorを見逃してはいけません。いくつかのセレクタルールを入力して比較し、どのセレクタルールが "勝つ"かを確認してください。

Answer 2

<input>と<textarea>要素のみがreadonly属性をサポートしているため、説明していないことはできません。