HTML CSS Упражнение: установить количество и вставить его перед элементами

Последнее обновление 01 декабря 2018 10:42:20 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Решение:

HTML-код:

<!doctype html>
<html>
<head>
<title>HTML CSS Exercise - Set count and insert it before elements</title>
<style>
ol {
  counter-reset: Step;                /* Creates a new instance of the
                                        Step counter with each ol
                                            element */
  list-style-type: none;
}
li:before {
  counter-increment: Step;            /* Increments only this instance
                                            of the Step counter */
  content: counters(Step,".") " ";    /* Adds the value of all instances
                                            of the Step counter separated
                                            by a ".". */
                                         
}
</style>
</head>
<body>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol></body>
</html>

Демонстрация в реальном времени:

См. «Задание счетчика и вставка перед ответом» от w3resource ( @ w3resource ) на CodePen .

Поддерживаемый браузер


да	да	да	да	да