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

利用中央支助事务。

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

rel=“nofollow noreferer> http://www.w3.org/TR/CSS2/generate.html。

Answer 2

这里为没有充分支持CSS2的浏览器提供 Java本解决办法。 I ve用3.5、IE6、IE7、IE8和4.0测试。我撰写了一份纯 Java版和一份相当的 j(1.4!)版本,正如你所想象的那样,该版本的篇幅要短得多。

使用 Java本的好处是,它比中心服务公司更容易定制。例如, Java本解决方案允许相互兼容的内容(即:你可以有多个<条码>和代号;ol>, 载于单亲父母的<条码>和>;li>, 并且无论你在子女代码<>和>、ol>之间是否有超文本。 (见备忘录)。

一个缺点是,Script版清单中的案文的选用将选择数字和案文(CSS解决办法有助于从甄选中删除数字)。

Working Demos

jQuery Version

rel=“nofollow noreferer”>http://jsbin.com/unujo (编辑:)

(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();

Pure JavaScript Version:

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

HTML and CSS

<!doctype html> 
<html lang="en"> 
<head> 
  <title></title> 
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
  <style type="text/css" media="screen"> 
    body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }

    .numbering { padding: 0 0.8em 0 1.2em; }
    .numbered ol { list-style-type: none; }
    .numbered > li > ol { padding-left: 0; }
  </style> 
</head> 
<body> 
  <ol> 
    <li>This</li> 
    <li>is a
      <ol> 
        <li>vanilla</li> 
        <li>list</li> 
      </ol> 
    </li> 
  </ol> 

  <ol class="numbered"> 
    <li>This is a numbered list</li> 
    <li>Vestibulum auctor dapibus neque.
      <ol> 
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
        <li>Aliquam tincidunt mauris eu risus.</li> 
      </ol> 
      It even handles interspersed content! Note that he numbering continues where it left off:
      <ol> 
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
        <li>Aliquam tincidunt mauris eu risus.</li> 
      </ol> 
    </li> 
  </ol> 

  <ol class="numbered"> 
    <li>This is another numbered list</li> 
    <li>Aliquam tincidunt mauris eu risus.</li> 
    <li>Vestibulum auctor dapibus neque.
      <ol> 
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
        <li>Aliquam tincidunt mauris eu risus.</li> 
        <li>Vestibulum auctor dapibus neque.
          <ol> 
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
            <li>Aliquam tincidunt mauris eu risus.</li> 
          </ol> 
        </li> 
        <li>Aliquam tincidunt mauris eu risus.</li> 
        <li>Vestibulum auctor dapibus neque.</li> 
      </ol> 
    </li> 
    <li>Aliquam tincidunt mauris eu risus.</li> 
    <li>Vestibulum auctor dapibus neque.</li> 
    <li>Aliquam tincidunt mauris eu risus.</li> 
    <li>Vestibulum auctor dapibus neque.</li> 
  </ol> 
</body> 
</html>

Answer 3

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

Working Demos

jQuery Version

Pure JavaScript Version

Full Source:

jQuery Version

Pure JavaScript Version:

HTML and CSS

友情链接