Question

我想将编号的源代码应用于特定标签，例如＆lt; br＆gt; ...我提供了两个例子，一个是格式良好但不起作用，第二个是良好的形式，它的工作..什么我可以做第一个例子吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>[Number Lines]</title>
  <style type="text/css">
  <!--
    body {
      background-color: #1F242C;
    }
    .title {
      color: #E6E6FA;
      font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
      font-size: 25px;
      font-style: normal;
      line-height: 50px;
      font-weight: bold;
      font-variant: normal;
      margin: 45%;
    }
    .code {
      background-color: #32363c;
      border: #858687 1px solid;
      border-radius: 7px;
      color: #E6E6FA;
      font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
      font-size: 13px;
      font-style: normal;
      line-height: 20px;
      font-weight: normal;
      font-variant: normal;
    }
    .code {
      counter-reset: listing;
    }
    br {
      counter-increment: listing;
    }
    .code br:before {
      color: gray;
      content: counter(listing, decimal-leading-zero);
      margin-left: 3ex;
      left: -3ex;
      position: relative;
      width: 2.5ex;
   }
  -->
  </style>
</head>

<body>

<br><br><br>
<table class="code" align="center" border="0" cellpadding="15" cellspacing="0" width="70%">
  <tr>
    <td>
      <span class="title">Example</span><br>
      line of source code<br>
      line of source code<br>
      line of source code<br>
      line of source code<br>
      line of source code<br>
      line of source code<br>
      line of source code<br>
      line of source code<br>
      line of source code<br>
      line of source code<br>
    </td>
  </tr>
</table>

</body>

</html>

此示例不起作用，而下面的示例效果很好！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>[Number Lines]</title>
  <style type="text/css">
  <!--
    body {
      background-color: #1F242C;
    }
    .title {
      color: #E6E6FA;
      font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
      font-size: 25px;
      font-style: normal;
      line-height: 50px;
      font-weight: bold;
      font-variant: normal;
      margin: 45%;
    }
    .code {
      background-color: #32363c;
      border: #858687 1px solid;
      border-radius: 7px;
      color: #E6E6FA;
      font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
      font-size: 13px;
      font-style: normal;
      line-height: 20px;
      font-weight: normal;
      font-variant: normal;
    }
    .code {
      counter-reset: listing;
    }
    code {
      counter-increment: listing;
    }
    .code code:before {
      color: gray;
      content: counter(listing, decimal-leading-zero);
      margin-left: 3ex;
      left: -3ex;
      position: relative;
      width: 2.5ex;
   }
  -->
  </style>
</head>

<body>

<br><br><br>
<table class="code" align="center" border="0" cellpadding="15" cellspacing="0" width="70%">
  <tr>
    <td>
      <span class="title">Example</span><br>
      <code>line of source code</code><br>
      <code>line of source code</code><br>
      <code>line of source code</code><br>
      <code>line of source code</code><br>
      <code>line of source code</code><br>
      <code>line of source code</code><br>
      <code>line of source code</code><br>
      <code>line of source code</code><br>
      <code>line of source code</code><br>
      <code>line of source code</code><br>
    </td>
  </tr>
</table>

</body>

</html>

为什么我不能使用＆lt; br＆gt;获得相同的结果？哪里错了？谢谢你回答我的问题......

Answer 1

您必须至少使用一些标记，正如您在工作代码中所看到的那样

code {counter-increment: listing;}

你可以使用，但如果它没有标签，那就是idk ......：P

Answer 2

使用br时无法获取行号，因为大多数浏览器只会将<br>视为换行命令，没有任何可调整性，无论CSS和HTML规范可能会说什么。< / p>

此外，在少数尝试认真对待br作为可设置元素的浏览器中，您可以将行号附加到一行。这就是您在Opera中的代码所发生的事情。

如果您使用以下内容，则Opera会根据需要显示行号：

 .code br {
      content: "\a " counter(listing, decimal-leading-zero);
      white-space: pre;
 }

然而，实际结论是，如果行号相关，则将它们放入文档内容中。如果没有，请省略它们。

我可以只使用<br/>使用CSS来应用带有css的编号行代码吗？

2 个答案: