努力获得正确的css格式在巢ul列表

我很努力与此，我想我的第一个李有一个圆形的子弹，然后嵌套李有一个缩进方形子弹。我的CSS试图做到这一点，我的网页的默认样式没有放置任何项目符号。努力获得正确的css格式在巢ul列表

有人可以帮忙吗？

<ul> 

    <li>Simplification of a complex purchase category 
     <ul> 
      <li>Meet local regulatory compliance </li> 
      <li>Subitem 2</li> 
     </ul> 
    </li> 
    <li>Final list item</li> 
</ul>

CSS

ul:first-child { 
    list-style-type:circle; 
} 

li:first-child { 
    list-style-type:square; 
} 

li:nth-child(2) { 
    list-style-type:square; 
}

来源

2014-01-25 Dano007

试试这个：

li { 
    list-style-type:circle; 
} 

li li { 
    list-style-type:square; 
}

来源

2014-01-25 07:49:14 Tims

在现货方面，由于 – Dano007

你可以使用你的标签类设置列表样式类型。

HTML

<ul class="round"> 
     <li>Simplification of a complex purchase category 
      <ul class="square"> 
       <li>Meet local regulatory compliance </li> 
       <li>Subitem 2</li> 
      </ul> 
     </li> 
     <li>Final list item</li> 
    </ul>

CSS：

.round { 
    list-style-type:bullet; 
} 

.square { 
    list-style-type:square; 
}

http://jsfiddle.net/8H9JA/

来源

2014-01-25 07:52:18 Haroldchen

我试着让它的一个练习，让我的标记班说： “这是什么” 和不是“它看起来如何”，例如'红色'或'圆形'。如果您稍后决定要将'li.round'更改为不同的列表类型，则必须在您的CSS和您的标记中对其进行更改。 –

你是对的，但这只是一个语义问题。为了演示的目的，我将类名改为易于识别。当然你也可以调用你的类：main-menu-list和sub-menu-list。因此它说明它是什么，而不是它看起来像什么，并且当你想改变视觉吸引力时，你只需要改变CSS。 – Haroldchen

好东西。只需在那里为子孙后代发表评论。 :) –

努力获得正确的css格式在巢ul列表

回答

相关问题