0

HTML と CSS ファイルを添付しました。

必要なもの：「a.」(a) のように () で囲み、次のレベルの "i" を (i) として、"i" の下に "1" として表示されるリスト番号を (aa) として (ab) として表示し、すぐ。

アライメントはそのままにして、スタイルだけを私の期待に沿って変更したい. これを行う方法？

注: 解決策によってアラインメントが変更されるべきではなく、JavaScript は許可されていません

p.p1 {
  text-indent: 0cm;
  margin-left: 36;
  word-break: break-all;
}
li {
  list-style-position: inside;
  margin-top: 10pt;
  word-break: break-all;
}
li::before {
  content: "";
  width: 13pt;
  display: inline-block;
}
.ol1 {
  padding-left: 2pt;
}
.pNote {
  text-indent: 0cm;
  margin: 0cm 0cm 10pt;
}
<ol class="ol1">
  <li>FirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirst
    <ol type="a">
      <li>Bullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-a
        <ol type="i">
          <li>Bullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-i
          </li>
          <ol type="aa">
            <li>Bullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aa
            </li>
            <li>
              Bullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-ab
            </li>
          </ol>
          <li>
            Bullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-ii
          </li>
        </ol>
      </li>
      <li>
        Bullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-b
      </li>
    </ol>
  </li>
  <li>
    SecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecond
  </li>
  <li>
    ThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThird
  </li>
</ol>

4

1 に答える 1

1

私の知る限り、中括弧を使用したリスト番号のスタイリングは現在不可能です。CSS3 仕様には、カウンター スタイルのカスタム定義とそれとの併用に関するセクションがありましたが、list-style-typeまだ完全には実装されていないようです (少なくともクロスブラウザーではありません)。デフォルトのリスト スタイル タイプを使用する代わりに、番号をリストします。

カウンターを使用する場合、各レベルに 1 つのカウンターを割り当て、対応するolタグでカウンターをリセット/初期化し、a が検出されるたびにカウンターの値をインクリメントし、疑似要素liを使用してテキストの前にカウンターの値を表示するだけです。:beforeカウンタ値はcontent疑似要素のプロパティを使用して表示されるため、中括弧を簡単に追加できます (文字列の連結を行うのと同じです)。

(aa)、(bb) スタイルの場合、counter-style-type が定義されており、varun aaruru がコメントで述べたように、これには事前定義されたカウンター/リスト スタイルはなく、そのような値はアルファベットの後にのみ来ますz。到達しました。デフォルトolのスタイリングでは、開始値を指定してこれを行うことができますが、それでもブラケットは生成されないため、ここでもカウンターを使用する必要があります。カウンターでは、カウンターの初期値自体を 26 にリセットすることでこれを実現できます (z は 26 番目のアルファベットです)。

以下のスニペットは、探している出力を生成します。

p.p1 {
  text-indent: 0cm;
  margin-left: 36;
  word-break: break-all;
}
li {
  list-style-position: inside;
  margin-top: 10pt;
  word-break: break-all;
}
li::before {
  content: "";
  width: 13pt;
  display: inline-block;
}
.ol1 {
  padding-left: 2pt;
}
.pNote {
  text-indent: 0cm;
  margin: 0cm 0cm 10pt;
}

/* initialize counters */

ol.a {
  counter-reset: list-item-level2;
}
ol.i {
  counter-reset: list-item-level3;
}
ol.aa {
  counter-reset: list-item-level4 26;
}

/* nullify default list styling */

ol.a li,
ol.i li,
ol.aa li {
  list-style-type: none;
}

/* reset the word break for pseudo elements */

ol.a li:before,
ol.i li:before,
ol.aa li:before {
  word-break: normal;
}

/* increment the counters */

ol.a li {
  counter-increment: list-item-level2;
}
ol.i li {
  counter-increment: list-item-level3;
}
ol.aa li {
  counter-increment: list-item-level4;
}

/* display the counter values */

ol.a li:before {
  content: '('counter(list-item-level2, lower-latin)')';
  margin-right: 16px;
}
ol.i li:before {
  content: '('counter(list-item-level3, lower-roman)')';
  margin-right: 16px;
}
ol.aa li:before {
  content: '('counter(list-item-level4, lower-latin)')';
  margin-right: 28px;
}
<ol class="ol1">
  <li>FirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirst
    <ol class="a">
      <li>Bullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-a
        <ol class='i'>
          <li>Bullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-i
          </li>
          <ol class="aa">
            <li>Bullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aa
            </li>
            <li>Bullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-ab
            </li>
          </ol>
          <li>
            Bullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-ii
          </li>
        </ol>
      </li>
      <li>
        Bullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-b
      </li>
    </ol>
  </li>
  <li>
    SecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecond
  </li>
  <li>
    ThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThird
  </li>
</ol>

于 2016-01-10T09:34:58.633 に答える