как включает с css родительский номер html?

Question

У меня есть следующая структура списка в html:

<ol>
    <li>
        <h1>main title</h1>
        <ol class="father">
            <li>mac</li>
            <li>windows</li>
            <li>linux</li>
        </ol>
    </li>
</ol>

результат предыдущего кода:

мне нужно добавить номер отца в ".father> li" и скрыть номер отца

пример:

main title
1.1. mac
1.2. windows
1.3. linux

Я видел какой-то пост, но ни с одним не смогчтобы найти решение, я надеюсь, вы поможете мне.

Answer 1

Требуется счетчик css

Вот HTML

<ol class="outer">
    <h1>main title</h1>
    <li>
        <ol class="father">
            <li>mac</li>
            <li>windows</li>
            <li>linux</li>
        </ol>
    </li>
</ol>

Вот CSS:

ol.outer {
    counter-reset: outer;
}
ol.outer > li {
    position: relative; /* Create a positioning context */
    list-style: none; /* Disable the normal item numbering */
    counter-increment: outer;
}

ol.father {
  counter-reset: father;
}

ol.father > li:before {
    content: counter(outer) "." counter(father);
    counter-increment: father; /* Increment the counter by 1 */
}

См. Следующее скрипка

Answer 2

Вы можете сделать это с помощью следующего CSS:

ol {
  counter-reset: section;               
  list-style-type: none;
}

ol.wrapper > li::before {
  visibility:hidden;
}

li::before {
  counter-increment: section;            
  content: counters(section, ".") " ";  
}

Рабочий пример