https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12253966662
同内容の質問を過去に他サイトでも投稿されているように見受けられますが、マルチポストを快く思わない方もおられるので十分な配慮をお願いします。
1.Bに対応する部分はCの箇所のどの部分ですか
「Bに対応する部分」を「Bが関連する部分」と捉えるならば ”全て” です。
B は「class属性値が entry-title
の要素」とも「単独の <h1>
要素」とも「<article>
の中の <h1>
要素」とも解釈することができます。
C の箇所(=Styles ペイン)には、まず .css ファイルか <style>
タグに記述されたスタイルシートの内、上記のような B の特徴に合致するセレクタで指定された全てのスタイル指定が羅列されます。
次に、ブラウザがデフォルト値として勝手に適用するスタイルシートも存在し、これもまた B に合致するものが右側に user agent stylesheet
と記載された上でペイン内に表示されます。
そして B に対する直接的なセレクタ指定とは別に、動画の 0:17 あたりから現れる Inherited from body.post-template-default...
のような祖先要素から引き継がれた一部のプロパティも表示されます。
2.1の箇所は一部分だと思いますが、他が長すぎる。これはなにか理由があるのですか
よって表示されている内容は全て B に関与しているので「長すぎる」ということはありません。Styles ペインには B に適用されようとしているスタイル指定が、重複指定されたもの(font-size
や line-height
など)も含めて全て表示されるため長く感じるのだと思います。
これらのスタイル指定がカスケーディングの仕様に沿って上書きを繰り返し最終的な B のスタイルは決定されます。上書きされて無効になった値は打ち消し線が表示されているので、質問1にあった「Bに対応する部分」が「B の表示に適用されたスタイル指定」と捉えるのであれば「C の中で打ち消し線が付いてないもの」と言えるかもしれません。
ちなみに、最終的に B にどんなスタイルが適用されているかを確認するなら1つ隣の Computed ペインを閲覧するのが使いやすいかと思います。