Ограничьте стилизацию упорядоченного списка с помощью класса на OL - PullRequest
Новая
       12

Ограничьте стилизацию упорядоченного списка с помощью класса на OL

2 голосов
/ 24 сентября 2019

Мне нужно ограничить стилизацию упорядоченного списка, добавив класс в OL.(Я не могу использовать родительский класс div.)

<ol class="mylist_1_a">

У меня есть рабочий пример: первый уровень использует десятичный тип, а второй - нижнюю альфа справая скобка вместо точки.http://jsfiddle.net/lbriquet/2b7jxLqr/

Однако, если я добавлю класс OL к моему css, он сломается.Это должно быть прямо, но это не так. 

ol.mylist_1_a {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
.mylist_1_a li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}
.mylist_1_a li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}
.mylist_1_a li li {
  margin: 0;
}
.mylist_1_a li li:before {
  content: counter(item, lower-alpha) ") ";
}

Что я делаю не так?

1 Ответ

0 голосов
/ 24 сентября 2019

Это потому, что вам также нужен ваш стиль <ol> для второго.Я просто поставил тот же класс на второй.

.test {width: 300px; background-color: #eee;}

ol.mylist_1_a{
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

.mylist_1_a li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

.mylist_1_a li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}

.mylist_1_a li li {
  margin: 0;
}


.mylist_1_a li li:before {
  content: counter(item, lower-alpha) ") ";
}
<div class="test">
  <ol class="mylist_1_a">
    <li>First item
      <ol class="mylist_1_a">
        <li>Some very long text that goes on the next line</li>
        <li>Short text</li>
      </ol>
    </li>
    <li>Second item and some very long text that goes on the next line</li>
  </ol>
</div>
...