如何使用小数点<ol>？</ol>

Question

想要创建一个这样的列表：

1. Section Header
    1.1 Some Text Here That is Quite Long
    1.2 Some Text Here That is Quite Long
    1.3 Some Text Here That is Quite Long
2. Section Header
    2.1 Some Text Here That is Quite Long
    2.2 Some Text Here That is Quite Long
    2.3 Some Text Here That is Quite Long

但理想情况下是正确的或组合（我喜欢整齐的正确页面）。这可能吗？

Answer 1

使用CSS。

http://www.webmaster-talk.com/css-forum/151861-ol-css-4-1-2-formatting.html

http://www.w3.org/TR/CSS2/generate.html

Answer 2

这是针对不完全支持CSS2的浏览器的JavaScript解决方案。我已经在Firefox 3.5，IE6，IE7，IE8和Chrome 4.0中进行了测试。我写了一个纯JavaScript版本和一个等效的jQuery（1.4！）版本，你可以想象它更短。

使用JavaScript的好处是它比CSS更具可定制性。例如，JavaScript解决方案允许散布内容（即，您可以在单个父<ol>中包含多个<li>，并且无论您在子{{1}之间放置什么HTML，编号都将是连续的s。（参见演示））。

一个缺点是选择JavaScript列表中的文本将选择数字和文本（CSS解决方案有助于省略选择中的数字）。

工作演示

jQuery版本

http://jsbin.com/unujo（可通过http://jsbin.com/unujo/edit编辑）

纯JavaScript版本

http://jsbin.com/ekono（可通过http://jsbin.com/ekono/edit编辑）

完整来源：

jQuery版本

<ol>

纯JavaScript版本：

(function ($) {
  $.fn.addNumbering = function (separator, parentNumbering) {
    var root = !parentNumbering;
    parentNumbering = parentNumbering || '';
    separator = separator || '.';

    $.each(this, function () {
      var items = root ? $(this).children() : this;

      items.each(function (ii, item) {
        var numberingText = parentNumbering + (ii + 1) + separator;

        // We don't add numbering to root list items since
        // the CSS already does that correctly.
        if (!root) {
          $('<span></span>', {
            text: numberingText,
            className: 'numbering'
          }).prependTo(this);
        }

        $.fn.addNumbering.call([$(this).find('>ol>li')], separator, numberingText);
      });
    });
  }
})(jQuery);

$('.numbered').addNumbering();

HTML和CSS

function addNumbering(list, separator, parentNumbering) {
  var root = !parentNumbering;
  parentNumbering = parentNumbering || '';
  separator = separator || '.';

  // If 'list' is an Array, assume we were given a
  // collection of ordered lists and call addNumbering on each
  if (Object.prototype.toString.call(list) === "[object Array]") {
    each(
      list, 
      function (list, ii) {
        addNumbering(list, separator, parentNumbering);
      }
    );
    return;
  }

  var
    listItem = function (childNode) {
      // Ignore text nodes. We assume that
      // the HTML follows standards so all the
      // remaining nodes should be list items.
      return childNode.nodeType === 1;
    },
    items = select(list.childNodes, listItem);

  each(
    items,
    function (item, ii) {
      var numberingText = parentNumbering + (ii + 1) + separator;

      // We don't add numbering to root list items since
      // the CSS already does that correctly.
      if (!root) {
        var numbering = document.createElement('span');
        numbering.innerHTML = numberingText;
        numbering.className = 'numbering';

        item.insertBefore(numbering, item.childNodes[0]);
      }

      var
        subLists = select(
          item.childNodes,
          function (childNode) {
            return childNode['tagName'] && childNode.tagName.toLowerCase() === 'ol';
          }
        ),
        subListItemWrapper = {childNodes: []};
      each(
        subLists,
        function (subList) {
          subListItemWrapper.childNodes =
            subListItemWrapper.childNodes.concat(select(
              subList.childNodes,
              listItem
            ));
        }
      );

      addNumbering(subListItemWrapper, separator, numberingText);
    }
  );
}

function select (things, selectFunction) {
  if (Array.filter) {
    return Array.prototype.slice.call(things, 0).filter(selectFunction);
  }
  var selected = selected || [];

  each (
    things,
    function (thing) {
      selectFunction(thing) && selected.push(thing);
    }
  );

  return selected;
}

function each (things, eachFunction) {
  if (Array.forEach) {
    things.forEach(eachFunction);
    return;
  }
  var numThings = things.length, ii;

  for (ii = 0; ii < numThings; ii++) {
    eachFunction(things[ii], ii, things);
  }
}

addNumbering(select(
  document.body.childNodes,
  function (childNode) {
    return childNode.nodeType === 1 && childNode.className.indexOf('numbered') !== -1;
  }
));

Answer 3

<ol type="1">
    <li>abc</li>
</ol>