0

我想将编号的源代码应用于特定标签，例如 <br>...我提供了两个示例，一个格式正确但不起作用，第二个格式正确并且它有效.. 我能做些什么开始工作第一个例子？

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

为什么我不能使用 <br> 来获得相同的结果？我哪里错了？感谢您对我的问题的任何答复...

4

2 回答 2

0

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

code {counter-increment: listing;}

您可以使用，但如果没有标签可以使用 idk...：P

于 2013-09-22T17:07:03.607 回答
0

使用 时无法获取包含的行号br，因为大多数浏览器只是将<br>其视为换行命令，没有样式，无论 CSS 和 HTML 规范怎么说。

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

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

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

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

于 2013-09-22T18:01:37.500 回答