标签混乱中的样式标签

Question

我有一个相当困难的时间了解这种类型的CSS选择器下面，或至少如何申请。

p .intro a { color: yellow } 

Answer 1

p .intro a { color: yellow } 

它将样式的

• a标签（从右至左读）
• 这是任何标签的后代与类（点是一类选择）intro
• 这是p标签的后代

示例（注意th Ë元素不是直接孩子，但后裔）：

<p> 
    <span> 
     <span class="intro"> 
      <span> 
       <a href="#">I am yellow</a> 
      </span> 
     </span> 
    </span> 
</p> 

(fiddle)

Answer 2

这个选择会匹配HTML类似：

<p> 
    <span class="intro"> 
     <a href="#">I am yellow</a> 
    </span> 
</p> 

基本上，一类intro一个p标签的内部的标签的内部的a标签。他们不必是直接的孩子。

Answer 3

你的jsfiddle例如失败，因为symantics的。窥视这个：Nesting block level elements inside the <p> tag... right or wrong?

所以你可以做的是您的标记改变，例如：

<p> 
    <span class="intro"> 
     <a href="#">I AM yellow</a> 
    </span> 
</p> 

或

<div> 
    <div class="intro"> 
     <a href="#">I AM yellow</a> 
    </div> 
</div>