1

私は私の質問からのよう<li>に私の下から - 要素に文字を追加したい:<ol>

body { counter-reset: item; }

ol.numbered_style li:before
{
    counter-increment:item;
    margin-bottom:5px;
    margin-right:10px;
    content:counter(item);
    background:blue;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}
ol.numbered_style.start_3{
  counter-reset: item 2; 
}

ol.none, ul.none,ol.numbered_style { list-style: none; }
<ol class="numbered_style">
	<li>first</li>
	<li>second</li>
	<li>third  Lorem Ipsum
		<ol class="numbered_style start_3">
			<li>missing an a after the number</li>
			<li>missing a b after the number</li>
			<li>missing a c after the number</li>
		</ol>
	</li>
</ol>
を試しましたが、うまくいきli::before { content: " a ";}ませんでした。また、2番目のカウンターを追加すると、次のような英数字パターンで次の要素を生成できるソリューションも必要ですlist-style-type: lower-alpha;

4

2 に答える 2

1

これを試してください：

ol.main {
  counter-reset: item;
}
ol.main li {
  counter-increment: item;
}
ol.numbered_style li:before {
  margin-bottom: 5px;
  margin-right: 10px;
  content: counter(item);
  background: blue;
  border-radius: 100%;
  color: white;
  width: 1.2em;
  text-align: center;
  display: inline-block;
}
ol.numbered_style ol.numbered_style li {
  counter-increment: subitem;
}
ol.numbered_style ol.numbered_style li:before {
  content: counter(item) counter(subitem, lower-alpha);
}
ol.none,
ul.none,
ol.numbered_style {
  list-style: none;
}
<ol class="main numbered_style">
  <li>first</li>
  <li>second</li>
  <li>third Lorem Ipsum
    <ol class="numbered_style">
      <li>missing an a after the number</li>
      <li>missing a b after the number</li>
      <li>missing a c after the number</li>
    </ol>
  </li>
</ol>

<hr>

<ol class="main numbered_style">
  <li>first</li>
  <li>second</li>
  <li>third Lorem Ipsum
    <ol class="numbered_style">
      <li>missing an a after the number</li>
      <li>missing a b after the number</li>
      <li>missing a c after the number</li>
    </ol>
  </li>
</ol>

于 2016-04-17T23:41:43.103 に答える
1

もちろん、できることは何でも<ol>できます。

ol.numbered_style.start_3{
  counter-reset: item2; 
}

ol.numbered_style.start_3 li:before {
    counter-increment:item2;
    content:counter(item2, upper-latin);
}/* List Style Type========^----------^*/

カウンター リスト スタイルの種類

  • 10 進数 ------------------------------- 1、2、3、...

  • 10 進先行ゼロ -------------- 01、02、03、... 09、10、11、...

  • 下位アルファ、下位ラテン ----------- a、b、c、... z、aa、ab、...

  • アッパーアルファ、アッパーラテン ---------- A、B、C、... Z、AA、AB、...

  • 低ローマ語 ------------------------ i, ii, iii, iv, v, vi, ...

  • アッパーローマン ------------------------ I、II、III、IV、V、VI、...

  • アスタリスク ------------------------------ *, **, ***,...

参照

http://www.princexml.com/doc/5.1/counters/

スニペット

body { counter-reset: item; }

ol.numbered_style li:before
{
    counter-increment:item;
    margin-bottom:5px;
    margin-right:10px;
    content:counter(item, upper-roman);
    background:blue;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}
ol.numbered_style.start_3{
  counter-reset: item2; 
}

ol.numbered_style.start_3 li:before {

    counter-increment:item2;
    margin-bottom:5px;
    margin-right:10px;
    content:"3"counter(item2, upper-latin);
    background:blue;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}
  
ol.none, ul.none,ol.numbered_style { list-style: none; }
<ol class="numbered_style">
	<li>first</li>
	<li>second</li>
	<li>third  Lorem Ipsum
		<ol class="numbered_style start_3">
			<li>missing an a after the number</li>
			<li>missing an b after the number</li>
			<li>missing an c after the number</li>
		</ol>
	</li>
</ol>

于 2016-04-17T23:19:41.980 に答える