html - 一見冗長な CSS セレクター

Question

私は、Wordpress のデフォルト テーマ TwentyThirteen を分析して、HTML と CSS を学習し、さらに重要なこととして、HTML と CSS の業界標準であると信じています。

冗長であると思われる CSS の部分に出くわしましたが、Wordpress チームがこれら 2 つの CSS セレクターを一緒に使用した理由について (おそらく) 洞察したいと思います。

ul.nav-menu,
div.nav-menu > ul {

Answer 1

最初のセレクター

ul.nav-menu

この最初のセレクターは、 という名前のクラスを持つ要素のみにulnav-menu関連します。例えば：

<ul class="nav-menu">
   <li></li>
   <li></li>
</ul>

ここでは、 のクラスを持つul単純な であるため、要素に関連しています。ulnav-menu

セカンドセレクター

div.nav-menu > ul

この 2 番目のセレクターは、 という名前のクラスを持つ直接の子 (直下)要素である要素のみにuldivnav-menu関連します。例えば：

<div class="nav-menu">
   <ul>
      <li></li>
      <li></li>
   </ul>    
</div>

ここでは、 のクラスを持つ の直下にあるため、ul内のに関連しています。divuldivnav-menu