Вложенный упорядоченный список HTML: 3-й шаг должен быть другого типа - PullRequest
Новая
       117

Вложенный упорядоченный список HTML: 3-й шаг должен быть другого типа

1 голос
/ 30 января 2020

Мне нужно разместить какой-то юридический текст на нашем веб-сайте (Положения и условия), и юристы сделали это так, чтобы было 2 уровня приращения. Не большая проблема, я нашел CSS, который хорошо справляется с задачей.

Однако проблема в том, что 3-й уровень приращения не 1.1.1 , а , поэтому другой тип. И я не могу найти способ добиться этого, используя CSS.

Дополнительным осложнением является то, что в еще одном абзаце они используют еще один тип для третьего уровня: i, ii, iii.

Код, который я использую ниже. Есть идеи, как этого добиться? 

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

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

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>this needs to be a</li>
      <li>this needs to be b</li>
      <li>this needs to be c</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>

</ol>

</body>
</html>

1 Ответ

1 голос
/ 30 января 2020

ОК, я понял это, благодаря указателю о классах из Мистер Листер .

Трюк был двойным:

  1. Добавить указать c селектор на CSS, чтобы выбрать только 3-й уровень списка
  2. Добавить 2 класса, один для нижнего альфа и один для нижнего римского

Полный код ниже. 

<!DOCTYPE html>
<html>
<head>
<style>

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

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

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

li ol > li {
  margin: 0;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

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

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

</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item
     <ol class="alpha">
      <li>this needs to be a</li>
      <li>this needs to be b</li>
      <li>this needs to be c</li>
    </ol>
    </li>
    <li>item</li>
    <li>item
    <ol class = "roman">
      <li>this needs to be i</li>
      <li>this needs to be ii</li>
      <li>this needs to be iii</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>

</ol>

</body>
</html>

Спасибо, что направили меня в правильном направлении!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...