了解层叠在CSS

我是新来的CSS，并试图了解它。在下面的代码中，如何解释/阅读风格来理解它。风格def是否适用于使用类“p220mid”的div下的list和ul元素，或者它是如何工作的。你们可以提供样品吗？

.p220mid ul li 
{ 
    background:transparent URL('images/bline.gif') repeat-x bottom; 
    width:205px; 
    height:28px; 
    margin-left:4px; 
    padding-left:4px; 
    color:4c76a0; 
}

谢谢， Appu。

来源

2011-06-24 appu

你在那里有什么将目标所有元素中的UL所有元素与一类p220mid。

如果你想针对所有UL和您的DIV所有li元素你想.p220mid ul, .p220mid ul li

来源

2011-06-24 08:17:13 shanethehat

所以你的意思是我提供的代码只会在li元素里面显示，而不是在ul元素里面hemselves。为了定位所有ul元素以及我需要添加.p220mid ul。这是一个正确的解释吗？ – appu

完全正确，是的。 – shanethehat

谢谢你的回复是信息。 – appu

的选择说“的风格所有锂元素是本身列为所有元素的后代的所有UI元素的后裔。 p220mid”。

来源

2011-06-24 08:17:28

CSS：

.p220mid ul li { 
      background:transparent URL('images/bline.gif') repeat-x bottom; 
      width:205px; 
      height:28px; 
      margin-left:4px; 
      padding-left:4px; 
      color:4c76a0; 
    }

HTML：

<div class="p220mid "> 
    <ul> 
     <li> 
     class style will be apply here 
     <li> 
    </ul> 
    </div>

来源

2011-06-24 08:19:44

检查我的链接http://jsfiddle.net/YyqYN/（我已经改变了背景图片的URL，这样就可以更清楚地看到）

它基本上意味着该样式只适用于出现在其中的一组html .p220mid ul li。

来源

2011-06-24 08:22:14

因为你有你的风格元素之间定义的空间（.p220mid UL LI），这意味着任何<李>后代元素（即嵌套类=“p220mid”和<UL>元素下，无论是直接的还是孩子一个孙子或孙女），它将会有应用的风格。

您应该CSS Selectors读到这里有语法

更好地把握要弄清这个例子应用的样式

<div class="p220mid"> 
    <ul> 
     <li> 
     class style will be applied here 
     <li> 
    </ul> 
</div>

，因此将这个例子

<div class="p220mid"> 
    <div> 
     <ul> 
      <li> 
       class style will also be applied here 
      <li> 
     </ul> 
    </div> 
</div>

来源

2011-06-24 08:22:32 Brad

编辑添加@Anand使用的示例和另一个用于进一步说明的示例 – Brad

了解层叠在CSS

回答

相关问题