cssの「>」
body{color:#000000;}
.section p{color:#ff0000;}
<div class="section"> 東京のターミナル <p>新宿：世界最高の乗降客数</p> <p>池袋：2番目の乗降客数を誇る</p> <p>東京：新幹線の発着駅</p> </div>
※「東京のターミナル」だけ黒で他は赤
↓
body{color:#000000;}
.section > p{color:#ff0000;}
<div class="section"> 東京のターミナル <p>新宿：世界最高の乗降客数</p> <span class="ikebukuro"><p>池袋：2番目の乗降客数を誇る</p></span> <p>東京：新幹線の発着駅</p> </div>
※sectionの直下のpだけ赤
池袋はに囲まれたpだから黒、sectionのすぐ下のpだけ反応
勉強させてもたっらサイト