css - 一見複雑すぎる CSS リストのスタイリングは簡単にすべき

Question

この形式に従う順序付きリストのスタイルを作成する必要があります。

(a)    List Item 1
(b)    List Item 2
    (1)    List Item 2.1
    (2)    List Item 2.2
        (i)    List Item 2.2.1
        (ii)   List Item 2.2.2

残念ながら、list-style-type上記のように数字を括弧付きで表示するオプションがないため、機能しません。

たくさんの研究は、醜いハックだけをもたらしました。例えば:

ol {
    list-style-type: none;
}

ol>li:before {
    content: "(" counter(lvl1, lower-alpha) ") ";
}

ol li {
    counter-increment: lvl1;
}

ol ol>li:before {
    content: "(" counter(lvl2, decimal) ") ";
}

ol ol>li {
    counter-increment: lvl2;
}

ol ol ol>li:before {
    content: "(" counter(lvl3, lower-roman) ") ";
}

ol ol ol>li {
    counter-increment: lvl3;
}

これはある程度機能し、リストの番号付けを で削除しlist-style-type: none;、 の先頭に括弧で囲まれた番号を挿入しliます。これは、他の関連するスタイリングを変更することを恐ろしいものにします。物事をうまく並べる方法などを理解できないためです（私はそれが可能だとは思いません）。またlist-style-position、数字は常に の中にあるため、冗長になりますli。

基本的に、CSS でこの種のリストの番号付けを再現する方法を探しています: (テキストの配置などに注意してください)

どんな助けでも大歓迎です!!