E F

E要素の子孫である F要素に対してスタイルが適用されます。

div p: div 要素の子孫である p 要素を表します。
div * p: div 要素の孫または子孫である p 要素を表します。 div 要素は、いくつかの要素の祖先であり、いくつかの要素は、p 要素の祖先でなければなりません。 " * " の前後の空白スペースは結合子で、" * " はユニバーサルセレクタではありません。
div p *[href]: 子孫結合子と属性セレクタを組み合わせています。div 要素内に p 要素があり、その p 要素内にある href 属性をもつ要素を表しています。

div p { background-color: #00ccff; }
div#foo p { background-color: #0099ff; }
div p a[href] { background-color: #0066ff; }

<div><p> div p </p></div>
<div id="foo"><p> div#foo p </p></div>
<div><p><a href="http://○○.jp/"> div p a[href] </a></p></div>

div p

div#foo p

※ E、F、foo など斜体は仮の名前です。