标签混乱中的样式标签

标签混乱中的样式标签

问题描述:

我有一个相当困难的时间了解这种类型的CSS选择器下面,或至少如何申请。标签混乱中的样式标签

p .intro a { color: yellow } 

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)

+0

我现在明白了,但这不是正确,我的标记为工作一些原因。我甚至复制/粘贴你的代码。 – user1762554

+0

试着制作一个http://jsfiddle.net来展示你想要做什么。这里是一个工作示例:http://jsfiddle.net/9p7qD/2/ – valentinas

+0

我只是试过jsfiddle,颜色仍然是蓝色。这段代码是怎么回事? – user1762554

这个选择会匹配HTML类似:

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

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

你的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>