以下に示すこのタイプの css セレクター、または少なくとも適用方法を理解するのにかなり苦労しています。
p .intro a { color: yellow }
p .intro a { color: yellow }
それはどんなスタイルにもなります(右から左に読む)
a
鬼ごっこintro
p
タグの子孫です例 (要素は直接の子ではなく、子孫であることに注意してください):
<p>
<span>
<span class="intro">
<span>
<a href="#">I am yellow</a>
</span>
</span>
</span>
</p>
このセレクターは、次のような HTML に一致します。
<p>
<span class="intro">
<a href="#">I am yellow</a>
</span>
</p>
基本的に、a
タグ内のタグのクラスを持つタグintro
内のp
タグ。直系の子である必要はありません。
あなたの jsFiddle の例は、シマンティクスのために失敗します。これを見てください: <p> タグ内にブロック レベルの要素をネストしています... 正しいか間違っていますか?
したがって、できることは、マークアップを次のように変更することです。
<p>
<span class="intro">
<a href="#">I AM yellow</a>
</span>
</p>
また
<div>
<div class="intro">
<a href="#">I AM yellow</a>
</div>
</div>