时间戳

首页 > 解决方案 > html有序列表属性“start”和“type”在外部css中不起作用

css - html有序列表属性“start”和“type”在外部css中不起作用

问题描述

我需要在 3*2 的表中列出一个列表，其中包含一行。所有的 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代码：

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

CSS代码：

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

对于这两种方式，“颜色”属性都有效，但 type 和 start 不是......为什么会这样？（如果我将它们作为内联样式输入，则 type 和 start 都有效。）

编辑 -

我正在尝试获取第 1 列部分的第 2 行和第 3 行。它以“我”开头。并继续“III”。我最初尝试通过为每 2 个单元格设置不同的 ol 属性类来实现这一点：

<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 属性。）

标签： csshtml

解决方案

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>

推荐阅读