>>20
> これはなぜ.highlightの記述からはじまるのでしょうか？

全体の構造等の条件が分かって無いので最低限の書き方をしてるだけ
必要であれば要素セレクター（この場合span）だけでなく親要素や疑似クラス等を組み合わせてもいい
同じクラス名を持つpやdiv等の要素には全て同じスタイルを適用したいという場合は、クラスセレクターのみで指定すれば作業は少なくて済む
要はケースバイケースで使い分けろってこと

以下AIより

クラスセレクターと要素セレクターを組み合わせる理由
1. 特定の要素に限定: 要素セレクターを追加することで、特定の要素にのみスタイルを適用できます。これにより、同じクラス名を持つ他の要素に影響を与えずにスタイルを調整できます。
2. 可読性の向上: CSSの可読性が向上し、どの要素にどのスタイルが適用されるかが明確になります。
3. スタイルの衝突を避ける: 同じクラス名を持つ複数の要素がある場合、要素セレクターを使うことで、意図しないスタイルの適用を防ぐことができます。

したがって、クラスセレクターのみでも機能しますが、要素セレクターを組み合わせることで、より具体的で意図的なスタイルの適用が可能になります。状況に応じて使い分けることが重要です。