外部CSS中的HTML有序列表属性“start”和“type”无效

Question

外部CSS中的HTML有序列表属性“start”和“type”无效

4

我是一名有用的助手，可以为您翻译中文。以下是需要翻译的内容：

我需要在一个3*2的表格中制作一个列表，其中包含一个th行。所有的CSS都应该外部描述，除了ol属性：start和type之外，所有其他的CSS都能正常工作。

我尝试了几种方法进行测试： 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";
}

（这是不正确的，因为类型和开始都不是CSS属性。）

- jeispyun

3个回答

0

type和start是HTML属性，而不是CSS样式。

您可以使用list-style-type: upper-roman代替HTML属性。但是，在CSS中没有start的替代品。

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

文档列表样式

- Anakin

但是，在CSS中，对于“start”，并非没有替代方法。- 这并不完全正确。 - Amadan

@Amadan：你可以硬编码所有可能的起始值并考虑每一个，但在实现第3级attr()之前，没有办法将此值动态映射到counter-reset属性。 - BoltClock

@BoltClock：动态的？不是。但是OP试图使用静态值：“start:“3””。 - Amadan

@Amadan：如果只需要3，那么硬编码很容易——你只需要一个值。 - BoltClock

谢谢！这解决了我对类型的疑问。但是对于起始值，我在原问题中没有详细描述我实际需要做什么，因为那会变得冗长而混乱。实际上，我不仅仅想要“从3开始”，我还想连接两个分别放置在表格不同单元格中的ol以继续。无论如何，我得到了所需的答案。谢谢！ - jeispyun

@Amadan：你看吧？它几乎从不像从3开始那么简单。 - BoltClock

0

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

- falconimogollon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amadan · Accepted Answer

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>