Question

HY，

我是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。

Answer 1

你所拥有的将使用p220mid类将所有元素中的所有li元素作为目标。

如果您想要定位div中所有ul和所有li元素，请.p220mid ul, .p220mid ul li

Answer 2

选择器说“将所有ul元素的样式设置为样式，这些元素本身就是所有元素的后代，这些元素本身就属于.p220mid”。

Answer 3

因为你的样式元素之间定义了空格（.p220mid ul li），这意味着任何＆lt; li＆gt;后代元素（即嵌套在class =“p220mid”下面和一个＆lt; ul＆gt;元素，无论是直接子节点还是孙子节点或曾孙子节点）它将应用该样式。

您应该阅读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>

Answer 4

<强> 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>

Answer 5

检查我的链接http://jsfiddle.net/YyqYN/（我已更改了背景图片网址，以便您可以更清楚地看到）

它基本上意味着该样式仅适用于.p220mid ul li中显示的html集。

了解CSS中的级联

5 个答案: