html упорядоченные атрибуты списка «start» и «type» не работают во внешнем css

Question

Мне нужно составить список в таблице 3 * 2, с одной строкой th.Весь CSS должен быть описан извне, и все остальные CSS работают, кроме атрибутов ol: start и type.

Я попробовал несколько способов просто проверить: 1. HTML-код:

<td class=cell3> //cell3 is another css I defined for td
    <ol>
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
    </ol>
</td>

Код CSS:

ol{
type: "I";
color: red;
start: "3"; }

2.html code:

<td class=cell3>
    <ol class = r3c1>
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
    </ol>
</td>

css code:

ol.r3c1{
    type: "I";
    color: red;
    start: "3";
}

Для обоих способов атрибут «color» работает, но типа и запуска нет ... почему это так? (обавведите и начните работать, если я введу их в виде встроенного стиля.)

Правка -

Я пытаюсь получить строки 2 и 3 части столбца 1.это начинается с "я"и продолжает «III».Сначала я пытался добиться этого, устанавливая разные классы атрибутов ol для каждых 2 ячеек:

<td class=cell1>
    <ol class=r2c1>
        <li>ol1 - item1</li>
    </ol>
</td>
<td class=cell2>row2 col2</td>
</tr>
<tr>
<td class=cell3>
    <ol class = r3c1>
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
    </ol>
</td>

css:

ol.r2c1{
    type: "I";
}
ol.r3c1{
    type: "I";
    start: "3";
}

(что неверно, поскольку type и start оба не являются атрибутами css.)

Answer 1

type и start не являются свойствами CSS.Работа с счетчиками в CSS немного сложна, так как вы должны делать все вручную:

ol {
  counter-reset: mycounter 2; /* whenever we see `<ol>`, `mycounter` is set to 2 */
}

li {
  list-style: none;  /* disable the default counter */
}

li::before {
  counter-increment: mycounter; /* whenever we see <li>, we increment `mycounter` by 1 */
  content: counter(mycounter, lower-roman) ". "; /* and display it before the <li> */
}

<ol>
  <li>number three</li>
  <li>number four</li>
</ol>

РЕДАКТИРОВАТЬ:

li {
  list-style: none;
}

.r2c1 {
  counter-reset: c1counter;
}
.r3c1 {
  counter-reset: c1counter 2;
}

tr > td:first-child li::before {
  counter-increment: c1counter; /* whenever we see <li>, we increment `mycounter` by 1 */
  content: counter(c1counter, lower-roman) ". "; /* and display it before the <li> */
}

.cell1 { background: #fcdffe; }
.cell2 { background: #c4fdb8; }
.cell3 { background: #ffffff; }
.cell4 { background: #ffffc1; }

<table>
  <tr>
    <td class="cell1">
      <ol class="r2c1">
        <li>ol1 - item1</li>
      </ol>
    </td>
    <td class="cell2">row2 col2</td>
  </tr>
  <tr>
    <td class="cell3">
      <ol class="r3c1">
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
      </ol>
    </td>
    <td class="cell4">row3 col2</td>
  </tr>
</table>

Answer 2

ol.r3c1{
    list-style-type: upper-roman;
    color: red;
}
p{
    color: black;
}

ol.r2{
    list-style-type: upper-roman;
    color: red;
}

<td class=cell3> 
    <ol class="r2" start="3">
        <li>ol1 - item2</li>
        <li><p>Color Black</p></li>
    </ol>
</td>
--------------------------------------
<td class=cell3> 
    <ol class="r3c1">
        <li>ol1 - item2</li>
        <li><p>Color Black</p></li>
    </ol>
</td>
-------------------------------------

Answer 3

type и start - это атрибуты HTML, а не стили CSS.

Вы можете использовать list-style-type: upper-roman вместо атрибута HTML.Но для start в CSS нет замены.

<td class=cell3>
    <ol class="r3c1" start="3">
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
    </ol>
</td>

CSS:

ol.r3c1{
    list-style-type: upper-roman;
    color: red;
}

https://jsfiddle.net/knfswo42/

list-style-typeдокументация