使用CSS替換ul項目符號點樣式

Question

我想為ul列表替換list-style-type屬性，以便外部是一個盤，然后一個內部ul列表是一個圓，而另一個內部是一個盤，依此類推。

基本上，我想要的是這樣的：

<ul><!-- use disc -->
  <li>Lorem ipsum</li>
  <li>
    <ul><!-- use circle -->
      <li>Lorem ipsum</li>
      <li>
        <ul><!-- use disc -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
      <li>Lorem ipsum</li>
    </ul>
  </li>
  <li>Lorem ipsum</li>
</ul>

我如何使用CSS實現這一目標？

Answer 1

像這樣...

li { list-style: circle; }
li li { list-style: disc; }
li li li { list-style: square; }

等等...

第一級列表項將具有“圓圈”類型標記。 第二個（嵌入式）將使用“光盤”。 第三級將使用正方形。

只需使用上面的CSS並更改list-style以滿足您的需求。 您可以在此處找到列表list-style類型list-style ： http ： //www.w3schools.com/cssref/pr_list-style-type.asp

Answer 2

您可以通過向ul標記添加class或id來使用單獨的樣式：

<ul class="disk"><!-- use disk -->
  <li>Lorem ipsum</li>
  <li>
    <ul class="circle"><!-- use circle -->
      <li>Lorem ipsum</li>
      <li>
        <ul class="disk"><!-- use disk -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

.disk
{
    list-style-type: disc;
}

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

或者你可以根據它們的嵌套方式為ul s添加樣式：

ul
{
    list-style-type:disc;
}

ul li ul
{
    list-style-type:circle;
}

ul li ul li ul
{
    list-style-type:disc;
}

在我的頭頂，所以可能會有一些小錯誤，但這兩個例子基本上都應該工作。

Answer 3

最好給每個元素賦予不同的子彈類型一個類名。

<ul>
    <li class="disk">test</li>
    <li class="circle">test</li>
    <li class="sq">test</li>
    <li class="sq">test</li>
</ul>

.disk {    
    list-style-type: disc;
}
.circle {
    list-style-type: circle;
}
.sq {
    list-style-type: square;
}

查看http://jsfiddle.net/LWQrh/上的工作示例

Answer 4

對此問題的簡單回答是否定的，無法通過CSS以一致的方式完成。

你可以編寫一些javascript來解析整個頁面並基本上維護一堆UL，但它會有點草率和hackish。 它必須是這樣的。

function doStyle(htmlBlock, depth)
    var returnHtml = '';

    // While the HTML block presented has UL tags within it
    while(htmlBlock.indexOf('<ul>') > 0) {

        // Take all the content up to the next/first <UL>
        returnHtml += htmlBlock.substring(0, htmlBlock.indexOf('<ul>'));

        // Add a styled <UL>, alternating on depth
        returnHtml += '<ul class="' + (depth % 2 == 0 ? 'square' : 'circle') + '">';

        // Recurse on the content inside that UL, using depth + 1
        returnHtml += doStyle(htmlBlock.substring(htmlBlock.indexOf('<ul>'), htmlBlock.indexOf('</ul>')), depth + 1);

        // Close the <UL>
        returnHtml += '</ul>';

        // Pull the whole UL block out of the remaining string
        htmlBlock = htmlBlock.substring(htmlBlock.indexOf('</ul>') + 5);
    }

    // Return the built up string, 
    // And whatever is left of the original HTML block
    return returnHtml + htmlBlock;
}

Answer 5

我找到了為什么我得到雙子彈的原因。 我的列表在語義上不正確，因此他們創建了多個項目符號。

這是正確的HTML：

<ul><!-- use disc -->
  <li>Lorem ipsum
    <ul><!-- use circle -->
      <li>Lorem ipsum
        <ul><!-- use disc -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
      <li>Lorem ipsum</li>
    </ul>
  </li>
  <li>Lorem ipsum</li>
</ul>

使用固定代碼，上述解決方案可行。