Question

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

对于这两种方式，“ color”属性都可以，但是type和start却不行。为什么呢？（如果我以内联样式输入它们，type和start都可以。）

编辑-

我正在尝试获取第1列的第2行和第3行。它以“ I”开头。并继续“ 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属性。）

Answer 1

type和start不是CSS属性。处理counters in 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

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 documentation

Answer 3

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

html有序列表属性“开始”和“类型”在外部CSS中不起作用

3 个答案: