Используйте CSS для чередования стилей точек пули ul

Я хотел бы чередовать свойства типа списка для списков ul, так что внешний-это диск, затем один внутренний список 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?

9
css html-lists

5 ответов

такой...

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

и так далее...

первый уровень элементов списка будет иметь маркер типа" круг". Второй (встроенный) будет использовать "диски". Третий уровень будет использовать квадраты.

просто возьмите выше CSS и измените list-style в соответствии с вашими потребностями. Вы можете найти список list-style типы здесь:http://www.w3schools.com/cssref/pr_list-style-type.asp

16

вы можете использовать отдельные стили, добавив class или id до ul теги:

<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;
}

или вы можете добавить стили в uls в зависимости от того, как они вложены:

ul
{
    list-style-type:disc;
}

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

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

С моей головы, поэтому могут быть некоторые незначительные ошибки, но оба этих примера должны в основном работать.

4

лучше всего дать каждому элементу с разным типом пули имя класса. 

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

2

Я нашел причину, по которой я получаю двойные пули. Мои списки не являются семантически правильными, поэтому они создают несколько пуль.

это правильный 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>

с фиксированным кодом, решения вышеуказанной работы.

0

простой ответ на этот вопрос-нет, он не может быть выполнен через CSS последовательным образом.

вы можете написать javascript для анализа страницы и в основном поддерживать стек ULs, но это было бы небрежно и хакерски. Должно быть что-то вроде этого.

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;
}
0