css - 使用 OL 上的类限制有序列表的样式

Question

我需要通过在 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) ") ";
}

我做错了什么？

Answer 1

因为你还需要你的<ol>第二个的风格。我只是把同一个类(class)放在第二个类(class)上。

.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>