Help Changing list-style-type in editor

[Xnyxzyxk]

I am trying to changed the list-style-type of Obsidian’s lists when in Live edit mode, so that they look the same as I’ve modified their Preview Mode counterparts to look.

This code works as intended. In the preview editor my ordered and unordered lists do what I want them to do:

/*Ordered and Unordered list*/

ul li li, 
ol li li {
    /*color: var(--red);*/
    list-style-type: circle  !important;
}
ul li li li, 
ol li li li{
    list-style-type: square !important;

}

ol li li li li{
    list-style-type: disc !important;
}

Result

Ordered List:

1. Item1
2. Item2
3. Item3
4. Sub-item1 => appears as a circle
   1. Sub-item2 => appears as a square
   1. Sub-item3 => appears as a disk

Unordered List:

• Item1 (disk)
  • Item2 (circle)
    • Item3 (square)

However when I try to edit the CSS in the editor to do something similar using code that is able to change the color of the list:

.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-2, 
.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-2{
    list-style-type: circle !important;
}



.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-3, 
.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-3{
    list-style-type: square !important;

}

In the editor all the unordered lists remain disks and all the ordered lists sub-items start over from one.

Is there anyway to fix this so that the Live Preview Editor list-style-type looks the same as the Reading version?